神奇的CSS3按钮特效
点击这里查看效果
以下是源代码：
1 <!doctype html> 2 <html> 3 4 <!-- author: @simurai --> 5 6 <head> 7 <title>CSS3神奇的按钮-柯乐义</title> 8 <meta charset="utf-8"> 9 <style> 10 11 12 /* This is just the basic styling for the whole page. */ 13 14 /* Global ------------------------------------------------------ */ 15 16 html { 17 font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif; 18 background-color: hsl(200,5%,15%); 19 background-size: 5px 5px; 20 background-image: -webkit-linear-gradient( 45deg, hsla(0,0%,0%,0) 0px, 21 hsla(0,0%,0%,.10) 50%, 22 hsla(0,0%,0%,0) 100% ); 23 } 24 25 body { 26 margin: 0; 27 } 28 29 30 31 /* list ------------------------------------------------------ */ 32 33 ul { 34 list-style: none; 35 padding: 50px 0; 36 margin: 0; 37 font-size: 2em; 38 text-align: center; 39 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,100%,0) 0px, 40 hsla(0,0%,100%,.09) 50%, 41 hsla(0,0%,100%,0) 100% ); 42 43 } 44 45 ul li { 46 padding: 50px 0; 47 } 48 49 50 51 /* Aside ------------------------------------------------------ */ 52 53 aside { 54 position: fixed; 55 top: 20px; 56 left: 20px; 57 } 58 59 aside button { 60 margin: 0; 61 padding: 10px ; 62 border: none; 63 border-radius: 5px; 64 font-weight: bold; 65 color: hsl(200,100%,60%); 66 background: hsla(0,0%,0%,.12); 67 cursor: pointer; 68 } 69 70 aside button:hover { 71 background: hsla(0,0%,0%,.2); 72 } 73 74 aside button:active { 75 -webkit-transform: translateY(1px); 76 } 77 78 /* 79 * umbrUI meter input by @simurai 80 */ 81 82 83 84 /* -------------- meter -------------- */ 85 86 meter:nth-child(1) { -webkit-transform: translate(-50px, 50px) rotate(-90deg); } 87 meter:nth-child(2) { -webkit-transform: translate( -25px, 25px) rotate(-90deg); } 88 meter:nth-child(3) { -webkit-transform: translate( 0px, 0px) rotate(-90deg); } 89 meter:nth-child(4) { -webkit-transform: translate( 25px, -25px) rotate(-90deg); } 90 meter:nth-child(5) { -webkit-transform: translate( 50px, -50px) rotate(-90deg); } 91 92 93 meter { 94 -webkit-appearance: none; 95 position: relative; 96 display: block; 97 margin: 8px auto; 98 width: 100px; 99 height: 17px; 100 border-radius: 5px; 101 padding: 4px 5px 4px 5px; 102 box-sizing: border-box; 103 background: #000; 104 -webkit-box-shadow: -1px 0 0 hsla(0,0%,100%,.08); 105 -webkit-transform-origin: center 8px; 106 } 107 108 109 meter::-webkit-meter-bar { 110 background-color: hsl(200,10%,14%); 111 background-size: 2px 5px; 112 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ), 113 -webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px ); 114 } 115 116 117 meter::-webkit-meter-optimum-value, 118 meter::-webkit-meter-suboptimum-value, 119 meter::-webkit-meter-even-less-good-value { 120 background-size: inherit; 121 background-image: inherit; 122 -webkit-box-shadow: 0 0 10px 2px hsla(200,100%,50%,.4); 123 -webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1); 124 } 125 126 127 /* With these pseudo selectors you could change the colors when changing the value. */ 128 meter::-webkit-meter-optimum-value { background-color: hsl(200,100%,50%); } 129 meter::-webkit-meter-suboptimum-value { background-color: hsl(200,100%,50%); } 130 meter::-webkit-meter-even-less-good-value { background-color: hsl(200,100%,50%); } 131 132 133 meter:hover::-webkit-meter-optimum-value, 134 meter:hover::-webkit-meter-suboptimum-value, 135 meter:hover::-webkit-meter-even-less-good-value { 136 /*In the real world, just change the element's value, this is just a hack for this demo.*/ 137 width: 100% !important; 138 -webkit-transition: width .3s cubic-bezier(.20, .10, .20, 1); 139 } 140 141 142 /* 143 * umbrUI range slider by @simurai 144 */ 145 146 147 /* -------------- Range Slider -------------- */ 148 149 input[type="range"] { 150 -webkit-appearance: none; /* Remove Safari default */ 151 outline: none; 152 width: 250px; 153 height: 5px; 154 border-radius: 1px; 155 position: relative; 156 157 158 background-color: #000; 159 160 -webkit-background-clip: padding-box; 161 border: 0; 162 border-bottom: 1px solid rgba(255,255,255,0.1); 163 cursor: ew-resize; 164 } 165 166 input[type="range"]::-webkit-slider-thumb { 167 -webkit-appearance: none; /* Remove Safari default */ 168 position: relative; 169 z-index: 1; 170 171 width: 26px; 172 height: 40px; 173 border-radius: 3px / 6px ; 174 175 background-image: -webkit-gradient( linear, left top, right top, 176 color-stop( 0, hsl(0,0%,15%) ), 177 color-stop( .16, hsl(0,0%,22%) ), 178 color-stop( .18, hsl(0,0%,30%) ), 179 color-stop( .2, hsl(0,0%,26%) ), 180 181 color-stop( .42, hsl(200,60%,30%) ), 182 color-stop( .44, hsl(200,0%,15%) ), 183 color-stop( .46, hsl(200,100%,50%) ), 184 color-stop( .54, hsl(200,100%,50%) ), 185 color-stop( .56, hsl(200,0%,15%) ), 186 color-stop( .58, hsl(200,60%,30%) ), 187 188 color-stop( .8, hsl(0,0%,26%) ), 189 color-stop( .82, hsl(0,0%,30%) ), 190 color-stop( .84, hsl(0,0%,22%) ), 191 color-stop( 1, hsl(0,0%,15%) ) 192 ); 193 194 -webkit-box-shadow: 195 196 inset hsla(0,0%,100%,.15) 0 1px 0px, 197 198 hsl(0,0%,17%) 0 2px 0px, 199 hsl(0,0%,15%) 0 4px 0px, 200 hsl(0,0%,13%) 0 6px 0px, 201 202 rgba(0,0,0,.5) 0 8px 5px; 203 204 -webkit-transform: translateY(-3px); 205 -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, 206 from(transparent), color-stop(0.6, transparent), to( rgba(255,255,255,0.15) )); 207 } 208 209 input[type="range"]:hover { 210 211 background-image: -webkit-gradient( linear, left top, right top, 212 color-stop( 0, hsl(200,80%,45%) ), 213 color-stop( .08, hsl(200,80%,15%) ), 214 color-stop( .5, hsl(200,80%,0%) ), 215 color-stop( .92, hsl(200,80%,15%) ), 216 color-stop( 1, hsl(200,80%,45%) ) 217 ); 218 219 -webkit-box-shadow: inset #000 1px 1px 1px, inset #000 -1px -1px 1px; 220 221 } 222 223 224 225 /* 226 * umbrUI checkboxes by @simurai 227 * Usage: <input type="checkbox" data-icon1="P" data-icon2="v" /> 228 */ 229 230 231 /* ----------- Checkbox */ 232 233 234 input[type="checkbox"] { 235 -webkit-appearance:none; /* Remove Safari default */ 236 outline: none; 237 width: 120px; 238 height: 40px; 239 240 position: relative; 241 border-radius: 6px; 242 background-color: #000; 243 -webkit-background-clip: padding-box; 244 245 border: 0; 246 border-bottom: 1px solid transparent; 247 -webkit-perspective: 200; 248 } 249 250 input[type="checkbox"]:before, input[type="checkbox"]:after { 251 font: bold 22px/32px sans-serif; 252 253 text-align: center; 254 255 position: absolute; 256 z-index: 1; 257 258 width: 56px; 259 height: 30px; 260 top: 4px; 261 262 border: 0; 263 border-top: 1px solid rgba(255,255,255,0.15); 264 } 265 266 input[type="checkbox"]:before { 267 content: attr(data-icon1); 268 left: 4px; 269 border-radius: 3px 0 0 3px; 270 271 } 272 273 input[type="checkbox"]:after { 274 content: attr(data-icon2); 275 right: 4px; 276 border-radius: 0 3px 3px 0; 277 } 278 279 280 /* ----------- checked/unchecked */ 281 282 /* unchecked */ 283 input[type="checkbox"] { 284 -webkit-border-image: -webkit-gradient(linear, 100% 0%, 0% 0%, 285 from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 286 color-stop(.1,rgba(255,255,255,.05)), 287 color-stop(.3,rgba(5,137,200,0.4)), 288 color-stop(.45,rgba(255,255,255,.05)), 289 color-stop(.9,rgba(255,255,255,.1)) 290 )100% 100%; 291 292 background-image: -webkit-gradient( 293 linear, right top, left top, 294 color-stop( 0, hsl(0,0%,0%) ), 295 color-stop( 0.14, hsl(0,0%,50%) ), 296 color-stop( 0.15, hsl(0,0%,0%) ) 297 ); 298 -webkit-box-shadow: inset #000 -7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px; 299 } 300 input[type="checkbox"]:after { 301 background-image: -webkit-gradient(linear, 70% top, 40% bottom, 302 from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) ) 303 ); 304 border-right: 1px solid transparent; 305 -webkit-border-image: -webkit-gradient(linear, left bottom, left top, 306 from(rgba(255,255,255,0)), 307 color-stop(.2,rgba(255,255,255,0)), 308 color-stop(.4,rgba(255,255,255,.5)), 309 to(rgba(255,255,255,.05)) 310 )10% 100%; 311 312 -webkit-box-shadow: rgba(0,0,0,.6) 8px 3px 10px; 313 -webkit-transform: rotateY(-30deg) scaleX(.9) scaleY(1.1) translateX(-8px); 314 } 315 316 317 /* checked */ 318 input[type="checkbox"]:checked { 319 -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 320 from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 321 color-stop(.1,rgba(255,255,255,.05)), 322 color-stop(.3,rgba(5,137,200,0.4)), 323 color-stop(.45,rgba(255,255,255,.05)), 324 color-stop(.9,rgba(255,255,255,.1)) 325 )100% 100%; 326 327 background-image: -webkit-gradient( 328 linear, left top, right top, 329 color-stop( 0, hsl(0,0%,0%) ), 330 color-stop( 0.14, hsl(0,0%,50%) ), 331 color-stop( 0.15, hsl(0,0%,0%) ) 332 ); 333 -webkit-box-shadow: inset #000 7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px; 334 } 335 input[type="checkbox"]:checked:before { 336 background-image: -webkit-gradient( linear, 30% top, 60% bottom, 337 from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) ) 338 ); 339 border-left: 1px solid transparent; 340 -webkit-border-image: -webkit-gradient(linear, left bottom, left top, 341 from(rgba(255,255,255,0)), 342 color-stop(.2,rgba(255,255,255,0)), 343 color-stop(.4,rgba(255,255,255,.5)), 344 to(rgba(255,255,255,.05)) 345 )10% 100%; 346 347 -webkit-box-shadow: rgba(0,0,0,.6) -8px 3px 10px; 348 -webkit-transform: rotateY(30deg) scaleX(.9) scaleY(1.1) translateX(8px); 349 } 350 351 352 /* ----------- active/inactve */ 353 354 /* Active */ 355 input[type="checkbox"]:before, input[type="checkbox"]:checked:after { 356 color: hsl(200,100%,50%); 357 text-shadow: rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px; 358 -webkit-transform: none; 359 background-image: -webkit-gradient( linear, left top, left bottom, 360 from( hsl(0,0%,20%) ), to( hsl(0,0%,15%) ) 361 ); 362 -webkit-border-image: none; 363 -webkit-box-shadow: none; 364 365 z-index: 2; 366 } 367 368 /* Inactive */ 369 input[type="checkbox"]:after, input[type="checkbox"]:checked:before { 370 color: #000; 371 text-shadow: rgba(255,255,255,.1) 0 -1px 0; 372 -webkit-box-reflect: none; 373 z-index: 1; 374 } 375 376 377 378 379 /* ----------- hover */ 380 381 input[type="checkbox"]:hover { 382 cursor: pointer; 383 } 384 385 input[type="checkbox"]:hover:before { 386 background-image: -webkit-gradient( linear, left top, left bottom, 387 from( hsl(0,0%,19%) ), to( hsl(0,0%,15%) ) 388 ); 389 390 } 391 input[type="checkbox"]:hover:after { 392 background-image: -webkit-gradient(linear, 70% top, 40% bottom, 393 from( hsl(0,0%,16%) ),to( hsl(0,0%,11%) ) 394 ); 395 } 396 397 input[type="checkbox"]:checked:hover:before { 398 background-image: -webkit-gradient( linear, 30% top, 60% bottom, 399 from( hsl(0,0%,16%) ),to( hsl(0,0%,12%) ) 400 ); 401 402 } 403 input[type="checkbox"]:checked:hover:after { 404 background-image: -webkit-gradient( linear, left top, left bottom, 405 from( hsl(0,0%,19%) ), to( hsl(0,0%,15%) ) 406 ); 407 } 408 409 /* 410 * umbrUI number input by @simurai 411 */ 412 413 @import url(http://fonts.googleapis.com/css?family=VT323); 414 415 416 /* -------------- number -------------- */ 417 418 input[type="number"] { 419 -webkit-appearance: none; 420 outline: none; 421 position: relative; 422 z-index: 1; 423 424 width: 120px; 425 height: 60px; 426 border-radius: 40px / 60px; 427 428 font-family: 'VT323', cursive; 429 font-size: 36px; 430 line-height: 40px; 431 text-align: center; 432 -webkit-font-smoothing: none; 433 color: hsl(200,100%,50%); 434 text-shadow: 0 -1px 0px hsla(200,100%,70%,1), 0 1px 0px hsla(0,0%,0%,.8), 0 0 13px hsl(200,100%,50%); 435 436 border: 0; 437 438 background-color: hsl(200,10%,12%); 439 background-size: 4px 4px; 440 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% ), 441 -webkit-linear-gradient( 90deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% ); 442 443 -webkit-box-shadow: inset 0 0 0 4px hsla(0,0%,0%,1), 444 inset 0 0 20px 5px hsla(0,0%,0%,.5), 445 0 0px 0px 1px hsla(0,0%,0%,.4), 446 0 1px 0 hsla(0,0%,100%,.25); 447 } 448 449 450 /* Outer spin only works in Safari, so lets hide it */ 451 input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 452 453 454 /* Spin button */ 455 input[type="number"]::-webkit-inner-spin-button { 456 -webkit-appearance: none; 457 width: 32px; 458 border-radius: 40px / 60px; 459 border: 4px solid #000; 460 cursor: ns-resize; 461 462 -webkit-box-shadow: inset 0px 0px 3px 1px hsla(0,0%,0%,.6), 463 inset 0px 6px 1px -2px hsla(0,0%,100%,.30), 464 inset 0px -7px 1px -1px hsla(0,0%,0%,.5); 465 466 background-color: hsl(0,0%,20%); 467 background-image: 468 469 -webkit-radial-gradient( 50% 5%, contain, hsla(0,0%,100%,.2) 0%, hsla(0,0%,0%,0) 70% ), 470 -webkit-radial-gradient( 50% 86%, contain, hsla(0,0%,100%,.05) 0%, hsla(0,0%,0%,0) 80% ), 471 -webkit-linear-gradient( -90deg, hsl(0,0%,15%) 0%, 472 hsl(0,0%,18%) 48%, 473 hsl(0,0%,10%) 48%, 474 hsl(0,0%,27%) 52%, 475 hsl(0,0%,20%) 52%, 476 hsl(0,0%,34%) 100% ); 477 478 -webkit-transition: border-color .2s ease-in-out; 479 } 480 481 482 /* :active */ 483 484 input[type="number"]:active::-webkit-inner-spin-button { 485 border-color: hsla(200,100%,50%,1); 486 -webkit-box-shadow: inset 0px 0px 3px 1px hsla(200,100%,20%,.6), 487 inset 0px 6px 1px -2px hsla(200,100%,70%,.4), 488 inset 0px -7px 1px -1px hsla(200,100%,10%,.5), 489 0px 0px 4px 3px hsla(200,100%,50%,.3); 490 491 -webkit-transition: none; 492 } 493 494 495 496 497 /* 498 * umbrUI radio buttons by @simurai 499 */ 500 501 502 503 /* ----------- radio */ 504 505 input[type="radio"] { 506 -webkit-appearance:none; /* Remove Safari default */ 507 outline: none; 508 width: 68px; 509 height: 80px; 510 511 position: relative; 512 display: inline-block; 513 margin: 3px; 514 border-radius: 6px; 515 516 background-color: #000; 517 518 -webkit-background-clip: padding-box; 519 520 border: 0; 521 border-bottom: 1px solid rgba(255,255,255,0.1); 522 523 -webkit-perspective: 200; 524 } 525 526 527 528 input[type="radio"]:before { 529 content: attr(data-icon); 530 531 font: 22px/22px sans-serif; 532 text-shadow: rgba(255,255,255,0.08) 0 -1px 0; 533 line-height: 40px; 534 535 text-align: center; 536 537 position: absolute; 538 z-index: 10; 539 540 width: 60px; 541 height: 70px; 542 543 margin: 4px; 544 border-radius: 3px; 545 546 background-image: -webkit-gradient( linear, left top, left bottom, 547 from( hsl(0,0%,20%) ), to( hsl(0,0%,15%) ) 548 ); 549 550 border-top: 1px solid rgba(255,255,255,0.15); 551 552 } 553 554 555 input[type="radio"]:after { 556 content: ""; 557 z-index: 12; 558 position: absolute; 559 560 margin: 3px; 561 border-radius: 3px; 562 563 left: 6px; 564 top: 62px; 565 width: 50px; 566 height: 5px; 567 568 -webkit-box-shadow: inset rgba(0,0,0,.2) 0 -1px 2px, inset rgba(255,255,255,.1) 0 1px 1px; 569 570 } 571 572 573 /* ----------- checked */ 574 575 576 input[type="radio"]:active, input[type="radio"]:checked { 577 -webkit-box-shadow: inset #000 4px 0px 4px, inset #000 -4px 0px 4px; 578 background-image: -webkit-gradient( 579 linear, left top, left bottom, 580 color-stop( 0, hsl(0,0%,10%) ), 581 color-stop( 0.14, hsl(0,0%,30%) ), 582 color-stop( 0.15, hsl(0,0%,0%) ) 583 ); 584 585 } 586 587 588 589 input[type="radio"]:active:before, input[type="radio"]:checked:before { 590 background-image: -webkit-gradient( linear, left top, left bottom, 591 from( hsl(0,0%,19%) ), to( hsl(0,0%,12%) ) 592 ); 593 594 z-index: 11; 595 596 border: 0; 597 border-top: 1px solid transparent; 598 -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 599 color-stop(0, hsla(200,100%,85%,.05)), 600 color-stop(.5, hsl(200,0%,40%)), 601 color-stop(1, hsla(200,100%,80%,.05)) 602 )50% 100%; 603 -webkit-box-shadow: 0px 2px 1px 1px hsl(0,0%,13%); 604 -webkit-transform: rotateX(-25deg) scaleX(.95) translateY(4px); 605 } 606 607 input[type="radio"]:checked:before { 608 color: hsl(200,100%,50%); 609 text-shadow: rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px; 610 -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 611 color-stop(0, hsla(200,100%,85%,.05)), 612 color-stop(.5, hsl(200,20%,50%)), 613 color-stop(1, hsla(200,100%,80%,.05)) 614 )50% 100%; 615 } 616 617 input[type="radio"]:active:after, input[type="radio"]:checked:after { 618 top: 59px; 619 -webkit-transform: scale(.9); 620 opacity: .4; 621 } 622 623 624 /* ----------- hover */ 625 626 input[type="radio"]:hover { 627 cursor: pointer; 628 } 629 input[type="radio"]:checked { 630 cursor: default; 631 } 632 input[type="radio"]:hover:before { 633 background-image: -webkit-gradient( linear, left top, left bottom, 634 from( hsl(0,0%,19.5%) ), to( hsl(0,0%,14%) ) 635 ); 636 } 637 input[type="radio"]:checked:hover:before { 638 background-image: -webkit-gradient( linear, left top, left bottom, 639 from( hsl(0,0%,19%) ), to( hsl(0,0%,12%) ) 640 ); 641 } 642 /* 643 * umbrUI progress input by @simurai 644 */ 645 /* -------------- progress -------------- */ 646 progress { 647 -webkit-appearance: none; 648 position: relative; 649 width: 150px; 650 height: 17px; 651 border-radius: 5px; 652 padding: 4px; 653 background: #000; 654 -webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.1); 655 656 /*Disabled for now. 657 -webkit-box-reflect: below -3px -webkit-radial-gradient( 50% 70%, 50% 25%, hsla(0,0%,0%,.2) 0%, hsla(0,0%,0%,0) 95% );*/ 658 } 659 progress::-webkit-progress-bar { 660 background-color: hsl(200,10%,14%); 661 background-size: 2px 5px; 662 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ), 663 -webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px ); 664 } 665 progress::-webkit-progress-value { 666 background-size: inherit; 667 background-image: inherit; 668 background-color: hsl(200,100%,50%); 669 -webkit-box-shadow: 0 0 10px 2px hsla(200,100%,50%,.4); 670 -webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1); 671 } 672 progress:hover::-webkit-progress-value { 673 /*In the real world, just change the element's value, this is just a hack for this demo.*/ 674 width: 100% !important; 675 -webkit-transition: width .3s cubic-bezier(.20, .10, .20, 1); 676 } 677 </style> 678 <script> 679 var rel = "stylesheet"; 680 function toggleUmbrUI() { 681 if (rel == "stylesheet") { 682 rel = "" 683 } else { 684 rel = "stylesheet" 685 } 686 var allsuspects = document.getElementsByClassName('umbrui'); 687 for (var i = allsuspects.length; i > 0; i--) { 688 //console.log(allsuspects[i]); 689 console.log(allsuspects[i - 1].href); 690 allsuspects[i - 1].rel = rel; 691 } 692 } 693 //toggleUmbrUI(); 694 </script> 695 </head> 696 <body> 697 <div>请使用支持CSS3的浏览器查看本页。<a href="http://keleyi.com/a/bjac/3t0molka.htm" target="_blank">原文</a></div> 698 <ul> 699 <!-- meter --> 700 <li> 701 <meter value="0.3"></meter> 702 <meter value="0.2"></meter> 703 <meter value="0.16"></meter> 704 <meter value="0.2"></meter> 705 <meter value="0.3"></meter> 706 </li> 707 <!-- range --> 708 <li> 709 <input type="range" /> 710 </li> 711 <!-- checkbox --> 712 <li> 713 <input type="checkbox" data-icon1="♀" data-icon2="♂" /> 714 </li> 715 <!-- number --> 716 <li> 717 <input type="number" min="1" max="99" value="78" /> 718 </li> 719 <!-- radio --> 720 <li> 721 <input type="radio" name="radio" data-icon="❮❮" /><input type="radio" name="radio" data-icon="►" /><input type="radio" name="radio" data-icon="❯❯" /> 722 </li> 723 <!-- progress --> 724 <li> 725 <progress value="0.3"></progress> 726 </li> 727 </ul> 728 <aside> 729 <button onclick="toggleUmbrUI()">柯乐义 CSS3特效</button> 730 </aside> 731 </body> 732 </html>
