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

在线演示        源码下载

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:;
  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:;
  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:;
  68.   z-index:;
  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:;
  84.   height:;
  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.  
  93. .bottom-arrow{
  94.   position:absolute;
  95.   overflow:hidden;
  96.   width:100%;
  97.   height:12px;
  98.   bottom:17px;
  99.   left:;
  100.   z-index:;
  101. }
  102. .bottom-arrow:before{
  103.   content:"";
  104.   position:absolute;
  105.   width:80%;
  106.   height:10px;
  107.   bottom:-10px;
  108.   left:10%;
  109.   border-radius:20%;
  110.   box-shadow:0 0 10px black;
  111. }
  112. .bottom-arrow:after{
  113.   content:"";
  114.   position:absolute;
  115.   width:;
  116.   height:;
  117.   bottom:;
  118.   border-bottom:12px solid #c39449;
  119.   border-left:8px solid transparent;
  120.   border-right:8px solid transparent;
  121.   margin-left:-8px;
  122.   left:50%;
  123. }
  124.  
  125. .wine:hover ~ .current{
  126.   left: 25.5%;
  127. }
  128. .burger:hover ~ .current{
  129.  left: 42%;
  130. }
  131. .comment:hover ~ .current{
  132.    left: 58.5%;
  133. }
  134. .sport:hover ~ .current{
  135.   left: 75%;
  136. }
  137. .earth:hover ~ .current{
  138.   left: 91.1%;
  139. }

在线演示        源码下载

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

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

核心CSS代码：

  1. .letter{
  2.   display: inline-block;
  3.   font-weight:;
  4.   font-size: 8em;
  5.   margin: 0.2em;
  6.   position: relative;
  7.   color: #00B4F1;
  8.   transform-style: preserve-3d;
  9.   perspective:;
  10.   z-index:;
  11. }
  12. .letter:before, .letter:after{
  13.   position:absolute;
  14.   content: attr(data-letter);
  15.   transform-origin: top left;
  16.   top:;
  17.   left:;
  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:;
  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:;
  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:; height:;
  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:; }
  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:; 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:; height:;
  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:;
  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', GradientType=0);
  75. }
  76. .checkedRadio {
  77.     -moz-box-shadow: inset 0 0 5px 1px #ccc;
  78.     -webkit-box-shadow: inset 0 0 5px 1px #ccc;
  79.     box-shadow: inset 0 0 5px 1px #ccc;
  80. }
  81. .radio-btn i {
  82.     border: 1px solid #E1E2E4;
  83.     width: 10px;
  84.     height: 10px;
  85.     position: absolute;
  86.     left: 4px;
  87.     top: 4px;
  88.     -webkit-border-radius: 100%;
  89.     -moz-border-radius: 100%;
  90.     border-radius: 100%;
  91. }
  92. .checkedRadio i {
  93.     background-color: #898A8C;
  94. }

在线演示        源码下载

CSS3联系表单 背景透明迷人

这款CSS3联系表单的背景相当不错，而且是半透明的。

核心CSS代码：

  1. body {
  2.       background:#2d3b36 url(Blurry-city-lights1337.jpg)no-repeat center center fixed;
  3.       -webkit-background-size: cover;
  4.       -moz-background-size: cover;
  5.       -o-background-size: cover;
  6.       background-size: cover;
  7.     padding-top:20px;
  8. }
  9.  
  10. form {
  11.     margin-left:auto;
  12.     margin-right:auto;
  13.     width: 343px;
  14.     height: 333px;
  15.     padding:30px;
  16.     border: 1px solid rgba(0,0,0,.2);
  17.     -moz-border-radius: 5px;
  18.     -webkit-border-radius: 5px;
  19.     border-radius: 5px;
  20.     -moz-background-clip: padding;
  21.     -webkit-background-clip: padding-box;
  22.     background-clip: padding-box;
  23.     background: rgba(0, 0, 0, 0.5);
  24.     -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
  25.     -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
  26.     box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
  27.     overflow: hidden;
  28. }
  29.  
  30. textarea{
  31.       background: rgba(255, 255, 255, 0.4) url(http://luismruiz.com/img/gemicon_message.png) no-repeat scroll 16px 16px;
  32.     width: 276px;
  33.     height: 110px;
  34.     border: 1px solid rgba(255,255,255,.6);
  35.     -moz-border-radius: 4px;
  36.     -webkit-border-radius: 4px;
  37.     border-radius: 4px;
  38.     -moz-background-clip: padding;
  39.     -webkit-background-clip: padding-box;
  40.     background-clip: padding-box;
  41.     display:block;
  42.     font-family: 'Source Sans Pro', sans-serif;
  43.     font-size:18px;
  44.     color:#fff;
  45.     padding-left:45px;
  46.     padding-right:20px;
  47.     padding-top:12px;
  48.     margin-bottom:20px;
  49.     overflow:hidden;
  50. }
  51.  
  52. input {
  53.     width: 276px;
  54.     height: 48px;
  55.     border: 1px solid rgba(255,255,255,.4);
  56.     -moz-border-radius: 4px;
  57.     -webkit-border-radius: 4px;
  58.     border-radius: 4px;
  59.     -moz-background-clip: padding;
  60.     -webkit-background-clip: padding-box;
  61.     background-clip: padding-box;
  62.     display:block;
  63.     font-family: 'Source Sans Pro', sans-serif;
  64.     font-size:18px;
  65.     color:#fff;
  66.     padding-left:20px;
  67.     padding-right:20px;
  68.     margin-bottom:20px;
  69. }
  70.  
  71. input[type=submit] {
  72.     cursor:pointer;
  73. }
  74.  
  75. input.name {
  76.       background: rgba(255, 255, 255, 0.4) url(http://luismruiz.com/img/gemicon_name.png) no-repeat scroll 16px 16px;
  77.       padding-left:45px;
  78. }
  79.  
  80. input.email {
  81.       background: rgba(255, 255, 255, 0.4) url(http://luismruiz.com/img/gemicon_email.png) no-repeat scroll 16px 20px;
  82.       padding-left:45px;
  83. }
  84.  
  85. input.message {
  86.       background: rgba(255, 255, 255, 0.4) url(http://luismruiz.com/img/gemicon_message.png) no-repeat scroll 16px 16px;
  87.       padding-left:45px;
  88. }
  89.  
  90. ::-webkit-input-placeholder {
  91.       color: #fff;
  92. }
  93.  
  94. :-moz-placeholder{
  95.     color: #fff;
  96. }
  97.  
  98. ::-moz-placeholder {
  99.     color: #fff;
  100. }
  101.  
  102. :-ms-input-placeholder {
  103.       color: #fff;
  104. }
  105.  
  106. input:focus, textarea:focus {
  107.       background-color: rgba(0, 0, 0, 0.2);
  108.     -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
  109.     -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
  110.     box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
  111.       overflow: hidden;
  112. }
  113.  
  114. .btn {
  115.       width: 138px;
  116.       height: 44px;
  117.       -moz-border-radius: 4px;
  118.       -webkit-border-radius: 4px;
  119.       border-radius: 4px;
  120.       float:right;
  121.     border: 1px solid #253737;
  122.     background: #416b68;
  123.     background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
  124.     background: -webkit-linear-gradient(top, #6da5a3, #416b68);
  125.     background: -moz-linear-gradient(top, #6da5a3, #416b68);
  126.     background: -ms-linear-gradient(top, #6da5a3, #416b68);
  127.     background: -o-linear-gradient(top, #6da5a3, #416b68);
  128.     background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
  129.     padding: 10.5px 21px;
  130.     -webkit-border-radius: 6px;
  131.     -moz-border-radius: 6px;
  132.     border-radius: 6px;
  133.     -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
  134.     -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
  135.     box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
  136.     text-shadow: #333333 0 1px 0;
  137.     color: #e1e1e1;
  138. }
  139.  
  140. .btn:hover {
  141.     border: 1px solid #253737;
  142.     text-shadow: #333333 0 1px 0;
  143.     background: #416b68;
  144.     background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
  145.     background: -webkit-linear-gradient(top, #77b2b0, #416b68);
  146.     background: -moz-linear-gradient(top, #77b2b0, #416b68);
  147.     background: -ms-linear-gradient(top, #77b2b0, #416b68);
  148.     background: -o-linear-gradient(top, #77b2b0, #416b68);
  149.     background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
  150.     color: #fff;
  151.  }
  152.  
  153. .btn:active {
  154.     margin-top:1px;
  155.     text-shadow: #333333 0 -1px 0;
  156.     border: 1px solid #253737;
  157.     background: #6da5a3;
  158.     background: -webkit-gradient(linear, left top, left bottom, from(#416b68), to(#416b68));
  159.     background: -webkit-linear-gradient(top, #416b68, #609391);
  160.     background: -moz-linear-gradient(top, #416b68, #6da5a3);
  161.     background: -ms-linear-gradient(top, #416b68, #6da5a3);
  162.     background: -o-linear-gradient(top, #416b68, #6da5a3);
  163.     background-image: -ms-linear-gradient(top, #416b68 0%, #6da5a3 100%);
  164.     color: #fff;
  165.     -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
  166.     -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
  167.     box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
  168.    }

在线演示        源码下载

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

  1. 超酷创意HTML5动画演示及代码

    HTML5是未来的网页开发神器,今天分享的这些HTML5动画大部分利用了CSS3的动画属性来实现,废话不多说,直接上演示和代码. HTML5/CSS3实现大风车旋转动画 这次我们要来分享一款很酷的HT ...

  2. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  3. 分享8款绚丽的HTML5/jQuery特效插件

    有几天没有分享前端资源了,今天要向大家分享15款非常给力的HTML5/jQuery特效插件,废话少说,一起来看看. 1.CSS3图片重力感应特效 很酷的一款CSS3模拟重力感应特效,你可以拖动图片来甩 ...

  4. 干货分享 9款精挑细选的HTML5应用

    对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单 图标动画 ...

  5. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  6. 简直要逆天！超炫的 HTML5 粒子效果进度条

    我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...

  7. 【干货分享】Node.js 中文资料导航

    这篇文章与大家分享一批高质量的的 Node.js 中文资料.Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的, 易于扩展的网络应用 Node ...

  8. 7款经典炫酷的HTML5/jQuery动画应用示例及源码

    jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富 ...

  9. 分享8款精美的jQuery图片播放插件

    本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究.废话不多说了,直接上这些插件. 1.3D轮播相册 这款3D相册插件利用了HTML5 ...

随机推荐

  1. 怎样把任意exe程序注册成windows系统服务(手动注册服务)

    1. 要实现这个功能要用到微软提供的两个小工具“instsrv.exe”和“srvany.exe”(下载地址:http://www.cr173.com/soft/64394.html). 先下载这两个 ...

  2. LeetCode: Search a 2D Matrix 解题报告

    Search a 2D Matrix Write an efficient algorithm that searches for a value in an m x n matrix. This m ...

  3. scikit-learn学习之贝叶斯分类算法

    版权声明:<—— 用心写好你的每一篇文章,转载请注明出处@http://blog.csdn.net/gamer_gyt <——   目录(?)[+]   ================= ...

  4. C#学习笔记（28）——匿名委托和Lambda表达式

    说明(2017-11-21 18:51:32): 1. 例子为求1~100的和,答案应该是5050(小学学算盘的时候,我爹就让我算,从1拨到100是多少呀?当时的我年幼无知,还不知道高斯小时候的故事, ...

  5. 基于jQuery悬停图片变色放大特效

    分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width ...

  6. IIS时间格式设置

    IIS时间格式调整: (已解决)今天在用IIS7的时候发现一个关于时间格式的问题,当我在ASP中使用now()时间函数的时候,日期是以“/”来分隔,而不是以“-”来分隔的,使得我在运行程序的时候老出错 ...

  7. JAVA字符串怎么转换成整数

    首先你要确定你的字符串可以转换为int类型的,比如说: String s = "123"; 如果String s = "abc";则转换时会报错! 需要的包是& ...

  8. 主流HTML5游戏框架的分析和对比

    本文主要选取了Construct2.ImactJS.LimeJS.GameMaker.CreateJS.lycheeJS.Crafty.three.js.melonJS.Turbulenz.Quint ...

  9. Java IO流学习

    Java IO流学习 Java流操作有关的类或接口: Java流类图结构: 流的概念和作用 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是 ...

  10. vba的一个DB操作类

    Option Explicit '-------------------------------------------------------- '[Class Name]: DBHelper '[ ...