JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 干货分享 超炫丽的HTML5/jQuery应用及代码

干货分享 超炫丽的HTML5/jQuery应用及代码

今天我们要来分享一些HTML5干货,对于前段开发者来说,这些HTML5应用和jQuery插件将会让你的项目更加生动和炫丽,至少在UI设计方面,或多或少会带给你一点设计灵感,赶紧收藏和分享吧。另外这些HTML5应用的源代码也一并分享了。

HTML5 Canvas画板画图工具 可定义笔刷和画布

这是一款基于HTML5 Canvas的网络画板应用,简化版的,可以自己在上面扩展。

核心jQuery代码:

  1. function prepareCanvas()
  2. {
  3.     // Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
  4.     var canvasDiv = document.getElementById('canvasDiv');
  5.     canvas = document.createElement('canvas');
  6.     canvas.setAttribute('width', canvasWidth);
  7.     canvas.setAttribute('height', canvasHeight);
  8.     canvas.setAttribute('id', 'canvas');
  9.     canvasDiv.appendChild(canvas);
  10.     if(typeof G_vmlCanvasManager != 'undefined') {
  11.         canvas = G_vmlCanvasManager.initElement(canvas);
  12.     }
  13.     context = canvas.getContext("2d"); // Grab the 2d canvas context
  14.     // Note: The above code is a workaround for IE 8 and lower. Otherwise we could have used:
  15.     //     context = document.getElementById('canvas').getContext("2d");
  16.    
  17.     // Load images
  18.     // -----------
  19.     crayonImage.onload = function() { resourceLoaded();
  20.     };
  21.     crayonImage.src = "images/crayon-outline.png";
  22.     //context.drawImage(crayonImage, 0, 0, 100, 100);
  23.    
  24.     markerImage.onload = function() { resourceLoaded();
  25.     };
  26.     markerImage.src = "images/marker-outline.png";
  27.    
  28.     eraserImage.onload = function() { resourceLoaded();
  29.     };
  30.     eraserImage.src = "images/eraser-outline.png";   
  31.    
  32.     crayonBackgroundImage.onload = function() { resourceLoaded();
  33.     };
  34.     crayonBackgroundImage.src = "images/crayon-background.png";
  35.    
  36.     markerBackgroundImage.onload = function() { resourceLoaded();
  37.     };
  38.     markerBackgroundImage.src = "images/marker-background.png";
  39.    
  40.     eraserBackgroundImage.onload = function() { resourceLoaded();
  41.     };
  42.     eraserBackgroundImage.src = "images/eraser-background.png";

  43.     crayonTextureImage.onload = function() { resourceLoaded();
  44.     };
  45.     crayonTextureImage.src = "images/crayon-texture.png";
  46.    
  47.     outlineImage.onload = function() { resourceLoaded();
  48.     };
  49.     outlineImage.src = "images/watermelon-duck-outline.png";

  50.     // Add mouse events
  51.     // ----------------
  52.     $('#canvas').mousedown(function(e)
  53.     {
  54.         // Mouse down location
  55.         var mou** = e.pageX - this.offsetLeft;
  56.         var mouseY = e.pageY - this.offsetTop;
  57.         
  58.         if(mou** < drawingAreaX) // Left of the drawing area
  59.         {
  60.             if(mou** > mediumStartX)
  61.             {
  62.                 if(mouseY > mediumStartY && mouseY < mediumStartY + mediumImageHeight){
  63.                     curColor = colorPurple;
  64.                 }else if(mouseY > mediumStartY + mediumImageHeight && mouseY < mediumStartY + mediumImageHeight * 2){
  65.                     curColor = colorGreen;
  66.                 }else if(mouseY > mediumStartY + mediumImageHeight * 2 && mouseY < mediumStartY + mediumImageHeight * 3){
  67.                     curColor = colorYellow;
  68.                 }else if(mouseY > mediumStartY + mediumImageHeight * 3 && mouseY < mediumStartY + mediumImageHeight * 4){
  69.                     curColor = colorBrown;
  70.                 }
  71.             }
  72.         }
  73.         else if(mou** > drawingAreaX + drawingAreaWidth) // Right of the drawing area
  74.         {
  75.             if(mouseY > toolHotspotStartY)
  76.             {
  77.                 if(mouseY > sizeHotspotStartY)
  78.                 {
  79.                     var sizeHotspotStartX = drawingAreaX + drawingAreaWidth;
  80.                     if(mouseY < sizeHotspotStartY + sizeHotspotHeight && mou** > sizeHotspotStartX)
  81.                     {
  82.                         if(mou** < sizeHotspotStartX + sizeHotspotWidthObject.huge){
  83.                             curSize = "huge";
  84.                         }else if(mou** < sizeHotspotStartX + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge){
  85.                             curSize = "large";
  86.                         }else if(mou** < sizeHotspotStartX + sizeHotspotWidthObject.normal + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge){
  87.                             curSize = "normal";
  88.                         }else if(mou** < sizeHotspotStartX + sizeHotspotWidthObject.small + sizeHotspotWidthObject.normal + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge){
  89.                             curSize = "small";                        
  90.                         }
  91.                     }
  92.                 }
  93.                 else
  94.                 {
  95.                     if(mouseY < toolHotspotStartY + toolHotspotHeight){
  96.                         curTool = "crayon";
  97.                     }else if(mouseY < toolHotspotStartY + toolHotspotHeight * 2){
  98.                         curTool = "marker";
  99.                     }else if(mouseY < toolHotspotStartY + toolHotspotHeight * 3){
  100.                         curTool = "eraser";
  101.                     }
  102.                 }
  103.             }
  104.         }
  105.         else if(mouseY > drawingAreaY && mouseY < drawingAreaY + drawingAreaHeight)
  106.         {
  107.             // Mouse click location on drawing area
  108.         }
  109.         paint = true;
  110.         addClick(mou**, mouseY, false);
  111.         redraw();
  112.     });
  113.    
  114.     $('#canvas').mousemove(function(e){
  115.         if(paint==true){
  116.             addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
  117.             redraw();
  118.         }
  119.     });
  120.    
  121.     $('#canvas').mouseup(function(e){
  122.         paint = false;
  123.           redraw();
  124.     });
  125.    
  126.     $('#canvas').mouseleave(function(e){
  127.         paint = false;
  128.     });
  129. }
复制代码


在线演示        源码下载


HTML5/CSS3滑块动画菜单 图标动画很酷


非常实用的鼠标跟随滑动菜单,挺不错的。


核心CSS代码:


  1. #menu ul{
  2.   position:relative;
  3. }
  4. #menu ul:after{
  5.   content:"";
  6.   display:block;
  7.   clear:both;
  8. }
  9. #menu a{
  10.   color:#D8D8D8;
  11.   text-decoration:none;
  12.   display:block;
  13.   width:100%;
  14.   height:100%;
  15.   text-shadow: 0 -1px 0 #000;
  16. }
  17. #menu li:after {
  18. content: "";
  19. width: 9.5238%;
  20. height: 100%;
  21. position: absolute;
  22. top: 0;
  23. right: -9.5238%;
  24. background: url('css/menu-bg.png');
  25. }
  26. .rocket:before {
  27. content: "";
  28. width: 9.5238%;
  29. height: 100%;
  30. position: absolute;
  31. top: 0;
  32. left: -9.5238%;
  33. background: url('css/menu-bg.png');
  34. border-radius: 5px 0px 0px 5px;
  35. }
  36. .earth:after{
  37.   border-radius:0px 5px 5px 0px;
  38. }
  39. .current{
  40.   position:absolute;
  41.   top:-13px;
  42.   left:8.92857%;
  43.   margin-left: -49px;
  44.   width:95px;
  45.   height:165px;
  46.   -webkit-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
  47. -moz-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
  48. -o-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
  49. -ms-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
  50. transition: all 400ms cubic-bezier(.16,1.23,.87,1.18);
  51. }
  52. .current-back{
  53.   width:100%;
  54.   height:100%;
  55.   position:absolute;
  56.   background:#c39449;
  57.   border-radius:5px;
  58.   border-bottom: 2px solid rgba(0, 0, 0, 0.09);
  59.   border-top: 2px solid rgba(255,255,255,0.1);
  60. }
  61. .top-arrow{
  62.   position:absolute;
  63.   overflow:hidden;
  64.   width:100%;
  65.   height:12px;
  66.   top:13px;
  67.   left:0;
  68.   z-index:2;
  69. }
  70. .top-arrow:before{
  71.   content:"";
  72.   position:absolute;
  73.   width:80%;
  74.   height:10px;
  75.   top:-10px;
  76.   left:10%;
  77.   border-radius:20%;
  78.   box-shadow:0 0 10px black;
  79. }
  80. .top-arrow:after{
  81.   content:"";
  82.   position:absolute;
  83.   width:0;
  84.   height:0;
  85.   top:0px;
  86.   border-top:8px solid #c39449;
  87.   border-left:6px solid transparent;
  88.   border-right:6px solid transparent;
  89.   margin-left:-6px;
  90.   left:50%;
  91. }

  92. .bottom-arrow{
  93.   position:absolute;
  94.   overflow:hidden;
  95.   width:100%;
  96.   height:12px;
  97.   bottom:17px;
  98.   left:0;
  99.   z-index:2;
  100. }
  101. .bottom-arrow:before{
  102.   content:"";
  103.   position:absolute;
  104.   width:80%;
  105.   height:10px;
  106.   bottom:-10px;
  107.   left:10%;
  108.   border-radius:20%;
  109.   box-shadow:0 0 10px black;
  110. }
  111. .bottom-arrow:after{
  112.   content:"";
  113.   position:absolute;
  114.   width:0;
  115.   height:0;
  116.   bottom:0;
  117.   border-bottom:12px solid #c39449;
  118.   border-left:8px solid transparent;
  119.   border-right:8px solid transparent;
  120.   margin-left:-8px;
  121.   left:50%;
  122. }

  123. .wine:hover ~ .current{
  124.   left: 25.5%;
  125. }
  126. .burger:hover ~ .current{
  127. left: 42%;
  128. }
  129. .comment:hover ~ .current{  
  130.    left: 58.5%;
  131. }
  132. .sport:hover ~ .current{
  133.   left: 75%;  
  134. }
  135. .earth:hover ~ .current{
  136.   left: 91.1%;
  137. }
复制代码


在线演示        源码下载


HTML5/CSS3 3D文字特效 文字外翻效果


一款基于HTML5的3D文字特效。


核心CSS代码:


  1. .letter{
  2.   display: inline-block;
  3.   font-weight: 900;
  4.   font-size: 8em;
  5.   margin: 0.2em;
  6.   position: relative;
  7.   color: #00B4F1;
  8.   transform-style: preserve-3d;
  9.   perspective: 400;
  10.   z-index: 1;
  11. }
  12. .letter:before, .letter:after{
  13.   position:absolute;
  14.   content: attr(data-letter);
  15.   transform-origin: top left;
  16.   top:0;
  17.   left:0;
  18. }
  19. .letter, .letter:before, .letter:after{
  20.   transition: all 0.3s ease-in-out;
  21. }
  22. .letter:before{
  23.   color: #fff;
  24.   text-shadow:
  25.     -1px 0px 1px rgba(255,255,255,.8),
  26.     1px 0px 1px rgba(0,0,0,.8);
  27.   z-index: 3;
  28.   transform:
  29.     rotateX(0deg)
  30.     rotateY(-15deg)
  31.     rotateZ(0deg);
  32. }
  33. .letter:after{
  34.   color: rgba(0,0,0,.11);
  35.   z-index:2;
  36.   transform:
  37.     scale(1.08,1)
  38.     rotateX(0deg)
  39.     rotateY(0deg)
  40.     rotateZ(0deg)
  41.     skew(0deg,1deg);
  42. }
  43. .letter:hover:before{
  44.   color: #fafafa;
  45.   transform:
  46.     rotateX(0deg)
  47.     rotateY(-40deg)
  48.     rotateZ(0deg);
  49. }
  50. .letter:hover:after{
  51.   transform:
  52.     scale(1.08,1)
  53.     rotateX(0deg)
  54.     rotateY(40deg)
  55.     rotateZ(0deg)
  56.     skew(0deg,22deg);
  57. }
复制代码


在线演示        源码下载


CSS3波浪形菜单 结合背景超级绚丽

一款非常具有创意的CSS3菜单,波浪形状的。

核心CSS代码:

  1. .b-nav {
  2.   overflow: hidden;
  3.   position: relative;
  4.   margin: 3em auto 0;
  5.   width: 28em; height: 10em;
  6. }
  7. .b-menu {
  8.   width: 0; height: 0;
  9.   list-style: none;
  10. }
  11. .b-menu li {
  12.   overflow: hidden;
  13.   position: absolute;
  14.   width: 12em; height: 12em;
  15. }
  16. .b-menu li:nth-child(-n+3) {
  17.   top: 0.66em; left: -5.68em;
  18.   transform-origin: 100% 100%;
  19. }
  20. .b-menu li:nth-child(n+4) {
  21.   right: -5.69em; bottom: 0.66em;
  22.   transform-origin: 0 0;
  23. }
  24. .b-menu li:first-child {
  25.   transform: skewY(67.5deg);
  26. }
  27. .b-menu li:nth-child(2) {
  28.   transform: rotate(22.5deg) skewY(67.5deg);
  29. }
  30. .b-menu li:nth-child(3) {
  31.   transform: rotate(45deg) skewY(67.5deg);
  32. }
  33. .b-menu li:nth-child(4) {
  34.   transform: skewY(67.5deg);
  35. }
  36. .b-menu li:nth-child(5) {
  37.   transform: rotate(22.5deg) skewY(67.5deg);
  38. }
  39. .b-menu li:last-child {
  40.   transform: rotate(45deg) skewY(67.5deg);
  41. }
  42. .b-menu a, .b-menu li:after {
  43.   position: absolute;
  44.   border-radius: 50%;
  45.   box-shadow: 0 0 .2em black, inset 0 0 .2em black;
  46.   transform: skewY(-67.5deg) rotate(-11.25deg);
  47. }
  48. .b-menu a {
  49.   width: 200%; height: 200%;
  50.   opacity: .7;
  51.   background: radial-gradient(transparent 57.3%,
  52.     #c9c9c9 57.7%);
  53.   color: #7a8092;
  54.   font: 900 1em/2.5 sans-serif;
  55.   text-align: center;
  56.   text-decoration: none;
  57.   transition: .5s;
  58. }
  59. .b-menu li:nth-child(n+4) a {
  60.   top: -100%; left: -100%;
  61.   line-height: 45.5;
  62. }
  63. .b-menu a:hover { opacity: 1; }
  64. .b-menu li:after {
  65.   top: 19%; left: 19%;
  66.   width: 162%; height: 162%;
  67.   content: '';
  68. }
  69. .b-menu li:nth-child(n+4):after {
  70.   top: auto; right: 19%; bottom: 19%; left: auto;
  71. }
  72. .b-menu:before, .b-menu:after {
  73.   position: absolute;
  74.   width: 1em; height: 2.1em;
  75.   opacity: .7;
  76.   background: #c9c9c9;
  77.   content: '';
  78. }
  79. .b-menu:before {
  80.   top: 1.75em; left: 1.21em;
  81.   border-radius: 100% 0 0 100%/ 50% 0 0 50%;
  82.   transform: rotate(-22.5deg);
  83. }
  84. .b-menu:after {
  85.   bottom: 1.75em; right: 1.21em;
  86.   border-radius: 0 100% 100% 0/ 0 50% 50% 0;
  87.   transform: rotate(-22.5deg);
  88. }
复制代码


在线演示        源码下载


HTML5/CSS3时尚的圆盘时钟动画 带当前日期


又是一款HTML5圆盘时钟动画。


核心CSS代码:


  1. #watch .minute-marks li:first-child {transform:rotate(6deg) translateY(-12.7em)}
  2. #watch .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}
  3. #watch .minute-marks li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)}
  4. #watch .minute-marks li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)}
  5. #watch .minute-marks li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)}
  6. #watch .minute-marks li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)}
  7. #watch .minute-marks li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)}
  8. #watch .minute-marks li:nth-child(8) {transform:rotate(54deg) translateY(-12.7em)}
  9. #watch .minute-marks li:nth-child(9) {transform:rotate(66deg) translateY(-12.7em)}
  10. #watch .minute-marks li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}
  11. #watch .minute-marks li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}
  12. #watch .minute-marks li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}
  13. #watch .minute-marks li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}
  14. #watch .minute-marks li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}
  15. #watch .minute-marks li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}
  16. #watch .minute-marks li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}
  17. #watch .minute-marks li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}
  18. #watch .minute-marks li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}
  19. #watch .minute-marks li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}
  20. #watch .minute-marks li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}
  21. #watch .minute-marks li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}
  22. #watch .minute-marks li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}
  23. #watch .minute-marks li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}
  24. #watch .minute-marks li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}
  25. #watch .minute-marks li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}
  26. #watch .minute-marks li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}
  27. #watch .minute-marks li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}
  28. #watch .minute-marks li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}
  29. #watch .minute-marks li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}
  30. #watch .minute-marks li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}
  31. #watch .minute-marks li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}
  32. #watch .minute-marks li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}
  33. #watch .minute-marks li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}
  34. #watch .minute-marks li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}
  35. #watch .minute-marks li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}
  36. #watch .minute-marks li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}
  37. #watch .minute-marks li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}
  38. #watch .minute-marks li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}
  39. #watch .minute-marks li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}
  40. #watch .minute-marks li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}
  41. #watch .minute-marks li:nth-child(41) {transform:rotate(306deg) translateY(-12.7em)}
  42. #watch .minute-marks li:nth-child(42) {transform:rotate(312deg) translateY(-12.7em)}
  43. #watch .minute-marks li:nth-child(43) {transform:rotate(318deg) translateY(-12.7em)}
  44. #watch .minute-marks li:nth-child(44) {transform:rotate(324deg) translateY(-12.7em)}
  45. #watch .minute-marks li:nth-child(45) {transform:rotate(336deg) translateY(-12.7em)}
  46. #watch .minute-marks li:nth-child(46) {transform:rotate(342deg) translateY(-12.7em)}
  47. #watch .minute-marks li:nth-child(47) {transform:rotate(348deg) translateY(-12.7em)}
  48. #watch .minute-marks li:nth-child(48) {transform:rotate(354deg) translateY(-12.7em)}
  49. #watch .digits {
  50.   width:30em;
  51.   height:30em;
  52.   border-radius:15em;
  53.   position:absolute;
  54.   top:0; left:50%;
  55.   margin-left:-15em;
  56. }
  57. #watch .digits li {
  58.   font-size:1.6em;
  59.   display:block;
  60.   width:1.6em;
  61.   height:1.6em;
  62.   position:absolute;
  63.   top:50%; left:50%;
  64.   line-height:1.6em;
  65.   text-align:center;
  66.   margin:-.8em 0 0 -.8em;
  67.   font-weight:bold;
  68. }
  69. #watch .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
  70. #watch .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
  71. #watch .digits li:nth-child(3) { transform:translate(8em, 0) }
  72. #watch .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
  73. #watch .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
  74. #watch .digits li:nth-child(6) { transform:translate(0, 8em) }
  75. #watch .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
  76. #watch .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
  77. #watch .digits li:nth-child(9) { transform:translate(-8em, 0) }
  78. #watch .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
  79. #watch .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
  80. #watch .digits li:nth-child(12) { transform:translate(0, -8em) }
  81. #watch .digits:before {
  82.   content:'';
  83.   width:1.6em;
  84.   height:1.6em;
  85.   border-radius:.8em;
  86.   position:absolute;
  87.   top:50%; left:50%;
  88.   margin:-.8em 0 0 -.8em;
  89.   background:#121314;
  90. }
  91. #watch .digits:after {
  92.   content:'';
  93.   width:4em;
  94.   height:4em;
  95.   border-radius:2.2em;
  96.   position:absolute;
  97.   top:50%; left:50%;
  98.   margin:-2.1em 0 0 -2.1em;
  99.   border:.1em solid #c6c6c6;
  100.   background:-webkit-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  101.   background:-moz-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  102.   background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  103. }
  104. @keyframes hours { to {transform:rotate(335deg)} }
  105. #watch .hours-hand {
  106.   width:.8em;
  107.   height:7em;
  108.   border-radius:0 0 .9em .9em;
  109.   background:#232425;
  110.   position:absolute;
  111.   bottom:50%; left:50%;
  112.   margin:0 0 -.8em -.4em;
  113.   box-shadow:#232425 0 0 2px;
  114.   transform-origin:0.4em 6.2em;
  115.   transform:rotate(-25deg);
  116.   animation:hours 43200s linear 0s infinite;
  117. }
  118. #watch .hours-hand:before {
  119.   content:'';
  120.   background:inherit;
  121.   width:1.8em;
  122.   height:.8em;
  123.   border-radius:0 0 .8em .8em;
  124.   box-shadow:#232425 0 0 1px;
  125.   position:absolute;
  126.   top:-.7em; left:-.5em;
  127. }
  128. #watch .hours-hand:after {
  129.   content:'';
  130.   width:0; height:0;
  131.   border:.9em solid #232425;
  132.   border-width:0 .9em 2.4em .9em;
  133.   border-left-color:transparent;
  134.   border-right-color:transparent;
  135.   position:absolute;
  136.   top:-3.1em; left:-.5em;
  137. }
  138. @keyframes minutes { to {transform:rotate(422deg)} }
  139. #watch .minutes-hand {
  140.   width:.8em;
  141.   height:12.5em;
  142.   border-radius:.5em;
  143.   background:#343536;
  144.   position:absolute;
  145.   bottom:50%; left:50%;
  146.   margin:0 0 -1.5em -.4em;
  147.   box-shadow:#343536 0 0 2px;
  148.   transform-origin:0.4em 11em;
  149.   transform:rotate(62deg);
  150.   animation:minutes 3600s linear 0s infinite;
  151. }
  152. @keyframes seconds { to {transform:rotate(480deg)} }
  153. #watch .seconds-hand {
  154.   width:.2em;
  155.   height:14em;
  156.   border-radius:.1em .1em 0 0/10em 10em 0 0;
  157.   background:#c00;
  158.   position:absolute;
  159.   bottom:50%; left:50%;
  160.   margin:0 0 -2em -.1em;
  161.   box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  162.   transform-origin:0.1em 12em;
  163.   transform:rotate(120deg);
  164.   animation:seconds 60s steps(60, end) 0s infinite;
  165. }
  166. #watch .seconds-hand:after {
  167.   content:'';
  168.   width:1.4em;
  169.   height:1.4em;
  170.   border-radius:.7em;
  171.   background:inherit;
  172.   position:absolute;
  173.   left:-.65em; bottom:1.35em;
  174. }
  175. #watch .seconds-hand:before {
  176.   content:'';
  177.   width:.8em;
  178.   height:3em;
  179.   border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
  180.   box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  181.   background:inherit;
  182.   position:absolute;
  183.   left:-.35em; bottom:-3em;
  184. }
  185. #watch .digital-wrap {
  186.   width:9em;
  187.   height:3em;
  188.   border:.1em solid #222;
  189.   border-radius:.2em;
  190.   position:absolute;
  191.   top:50%; left:50%;
  192.   margin:3em 0 0 -4.5em;
  193.   overflow:hidden;
  194.   background:#4c4c4c;
  195.   background:-webkit-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);
  196.   background:-moz-linear-gradient(top, #4c4c4c 0%, #0f0f0f 100%);
  197.   background:-ms-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);
  198.   background:-o-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);
  199.   background:linear-gradient(to bottom, #4c4c4c 0%,#0f0f0f 100%);
  200. }
  201. #watch .digital-wrap ul {
  202.   float:left;
  203.   width:2.85em;
  204.   height:3em;
  205.   border-right:.1em solid #000;
  206.   color:#ddd;
  207.   font-family:Consolas, monaco, monospace;
  208. }
  209. #watch .digital-wrap ul:last-child { border:none }
  210. #watch .digital-wrap li {
  211.   font-size:1.5em;
  212.   line-height:2;
  213.   letter-spacing:2px;
  214.   text-align:center;
  215.   position:relative;
  216.   left:1px;
  217. }
  218. #watch .digit-minutes li {
  219.   animation:dsm 3600s steps(60, end) 0s infinite;
  220. }
  221. #watch .digit-seconds li {
  222.   animation:dsm 60s steps(60, end) 0s infinite;
  223. }
  224. @keyframes dsm {
  225.   to { transform:translateY(-120em) }
  226. }
复制代码

在线演示        源码下载


CSS3带图标提示插件 多主题颜色


一款基于CSS3样式提示框插件,色彩比较丰富。



在线演示        源码下载


CSS3漂亮的自定义checkbox复选框 9款迷人样式


很酷的CSS3自定义checkbox插件,样式很丰富。



在线演示        源码下载


HTML5/CSS3发光搜索表单 超酷CSS3表单



在线演示        源码下载


CSS3悬停动画工具提示效果

在线演示        源码下载

HTML5自定义Checkbox和Radiobox 很酷的选中动画

非常不错的一款HTML5 教程,可以让你自定义checkbox和radiobox。

核心CSS代码:


  1. .check-box {
  2.     width: 22px;
  3.     height: 22px;
  4.     cursor: pointer;
  5.     display: inline-block;
  6.     margin: 2px 7px 0 0;
  7.     position: relative;
  8.     overflow: hidden;
  9.     box-shadow: 0 0 1px #ccc;
  10.     -webkit-border-radius: 3px;
  11.     -moz-border-radius: 3px;
  12.     border-radius: 3px;
  13.     background: rgb(255, 255, 255);
  14.     background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
  15.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
  16.     background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
  17.     background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
  18.     background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
  19.     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
  20.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
  21.     border: 1px solid #ccc;
  22. }
  23. .check-box i {
  24.     background: url('css/check_mark.png') no-repeat center center;
  25.     position: absolute;
  26.     left: 3px;
  27.     bottom: -15px;
  28.     width: 16px;
  29.     height: 16px;
  30.     opacity: .5;
  31.     -webkit-transition: all 400ms ease-in-out;
  32.     -moz-transition: all 400ms ease-in-out;
  33.     -o-transition: all 400ms ease-in-out;
  34.     transition: all 400ms ease-in-out;
  35.     -webkit-transform:rotateZ(-180deg);
  36.     -moz-transform:rotateZ(-180deg);
  37.     -o-transform:rotateZ(-180deg);
  38.     transform:rotateZ(-180deg);
  39. }
  40. .checkedBox {
  41.     -moz-box-shadow: inset 0 0 5px 1px #ccc;
  42.     -webkit-box-shadow: inset 0 0 5px 1px #ccc;
  43.     box-shadow: inset 0 0 5px 1px #ccc;
  44.     border-bottom-color: #fff;
  45. }
  46. .checkedBox i {
  47.     bottom: 2px;
  48.     -webkit-transform:rotateZ(0deg);
  49.     -moz-transform:rotateZ(0deg);
  50.     -o-transform:rotateZ(0deg);
  51.     transform:rotateZ(0deg);
  52. }
  53. /*Custom radio button*/
  54. .radio-btn {
  55.     width: 20px;
  56.     height: 20px;
  57.     display: inline-block;
  58.     float: left;
  59.     margin: 3px 7px 0 0;
  60.     cursor: pointer;
  61.     position: relative;
  62.     -webkit-border-radius: 100%;
  63.     -moz-border-radius: 100%;
  64.     border-radius: 100%;
  65.     border: 1px solid #ccc;
  66.     box-shadow: 0 0 1px #ccc;
  67.     background: rgb(255, 255, 255);
  68.     background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
  69.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
  70.     background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
  71.     background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
  72.     background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
  73.     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
  74.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientT

    【干货分享 超炫丽的HTML5/jQuery应用及代码】相关文章

    1. 干货分享 超炫丽的HTML5/jQuery应用及代码

    2. 炫酷霸气的HTML5/jQuery应用及源码

    3. 7款很酷的JQuery动画和实用的JQuery应用

    4. 9款完美体验的HTML5/jQuery应用

    5. 7个最新jQuery/HTML5应用及源码下载

    6. 华丽的HTML5/jQuery动画和应用 前端必备

    7. 华丽的HTML5/jQuery动画和应用 前端必备

    8. HTML5/jQuery应用助网站走向高大上

    9. 7个经典创意jQuery应用插件及源码

    10. 响应式布局的设计方法和响应式前端优化干货

    本文来源:https://www.51html5.com/a1318.html

    点击展开全部

﹝干货分享 超炫丽的HTML5/jQuery应用及代码﹞相关内容

「干货分享 超炫丽的HTML5/jQuery应用及代码」相关专题

其它栏目

也许您还喜欢