首页 何问起 前端特效 htbtn-4 闪电 使用方法

神奇的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>
roucheng

转载自:http://keleyi.com/a/bjac/3t0molka.htm

http://www.cnblogs.com/roucheng/

posted @ 2013-12-12 23:24  roucheng  阅读(1576)  评论(0编辑  收藏  举报