令人惊叹的HTML5动画及源码分析下载

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的澳门新浦京手机版 ,付费投稿计划!

HTML5非常酷,利用HTML5制作动画简直让我们忘记了这世界上还有flash的存在。今天我们要分享的一些HTML5动画都还不错,有些动画设计还是挺别出心裁的。另外,每一款HTML5动画都提供源代码下载,并且我们对源码作一些简单的分析。

今天我们要来分享一些很酷的HTML5动画演示,HTML5的强大之处在于它可以利用canvas的特性来绘制很多普通网页无法完成的图形和动画,canvas就像一块超级画板,在上面不仅可以实现平面图形,而且一些3D动画也非常简单。很多HTML5动画也都基于canvas,一起来看看吧。

这是一款基于HTML5和CSS3的3D动画特效,与之前的3D特效不同的是,这款是完全用HTML5特性实现的,而并非用多张图片叠加起来。这款3D动画还有一个特点是可以无限的旋转,从而可以从多个视角来观察HTML5
Logo。

HTML5画图特效 超酷的笔刷动画

这是一款基于HTML5的画笔动画,可以选择不同的笔刷形状,笔刷在画布上移动时就会播放非常绚丽的动画效果。

核心jQuery代码:

澳门新浦京手机版 1澳门新浦京手机版 2

var H = 0;

$('.button').bind('mousedown touchstart',function(e) {
  $('.clicked').removeClass('clicked');
  $(this).addClass('clicked');
});

$(document).bind('mousemove touchmove',function(e) {
    e.preventDefault();
    var drawSize = 55;
    var drawType = $('.clicked').html();
    var floatTypes = Array('floatOne','floatTwo','floatThree','floatFour','floatFive');
    var floatType = floatTypes[Math.floor(Math.random()*floatTypes.length)];
    var xPos = e.originalEvent.pageX;
    var yPos = e.originalEvent.pageY;

    $('body').append('<div class="draw" style="font-size:'+drawSize+'px;left:'+xPos+'px;top:'+yPos+'px;-webkit-animation:'+floatType+' .9s 1;-moz-animation:'+floatType+' .9s 1;color:hsla('+H+',100%,70%,1)">'+drawType+'</div>');

    $('.draw').each(function() {
      var div = $(this);
      setTimeout(function() {$(div).remove();},800);
    });
});

setInterval(function() {
  if(H<=360) {H++;}
  else {H=0;}
},10);

View Code

澳门新浦京手机版 3

在线演示 
      源码下载

HTML5/CSS3实现大风车旋转动画

作为今天首款HTML5动画,这款大风车旋转效果的确非常棒,它是用纯CSS3实现。

核心CSS代码:

澳门新浦京手机版 4澳门新浦京手机版 5

.wmd1{
   -webkit-transform: scale(.6);
  position:absolute;
  top:180px;
  left:200px;
  perspective: 1000px;
}

.base{ }

.blades{
  width: 350px;
  height: 350px;
  left: 10%;
  top: 10%;
  z-index:2;
  border-radius: 50%;
  position: absolute;
  margin-top: -30px;
  margin-left: 50px;

  animation: spin 6s linear infinite;
}

.blade1 {
          background: white;
  position:absolute;
      width:41px;
      height:139px;
  top:-10px;
  left:150.5px;
  transform:rotate(0deg);
  display:inline-block;
  background:
    linear-gradient(135deg, transparent 20px, white 0),
    linear-gradient(225deg, transparent 20px, white 0),
    linear-gradient(315deg, transparent 20px, white 0),
    linear-gradient(45deg, transparent  20px,  white 0);
  background-position: top left, top right, bottom right, bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.blade2 {
          background:white;
  position:absolute;
      width:41px;
      height:139px;
  top:105.5px;
  left:41px;
  transform:rotate(-90deg);
  display:inline-block;
  background:
    linear-gradient(135deg, transparent 20px, white 0),
    linear-gradient(225deg, transparent 20px, white 0),
    linear-gradient(315deg, transparent 20px, white 0),
    linear-gradient(45deg, transparent  20px,  white 0);
  background-position: top left, top right, bottom right, bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.blade3 {
          background:white;
  position:absolute;
      width:41px;
      height:139px;
  top:105.5px;
  right:41px;
  transform:rotate(-270deg);
  display:inline-block;
  background:
    linear-gradient(135deg, transparent 20px, white 0),
    linear-gradient(225deg, transparent 20px, white 0),
    linear-gradient(315deg, transparent 20px, white 0),
    linear-gradient(45deg, transparent  20px,  white 0);
  background-position: top left, top right, bottom right, bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.blade4 {
          background:white;
  position:absolute;
      width:41px;
      height:139px;
  bottom:-10px;
  left:150.5px;
  transform:rotate(180deg);
  display:inline-block;
  background:
    linear-gradient(135deg, transparent 20px, white 0),
    linear-gradient(225deg, transparent 20px, white 0),
    linear-gradient(315deg, transparent 20px, white 0),
    linear-gradient(45deg, transparent  20px,  white 0);
  background-position: top left, top right, bottom right, bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.vane1{
  width:1px;
  height:350px;
  left:175px;
  background:white;
  position:absolute;
  transform:rotate(90deg);
}

.vane2{
  width:1px;
  height:350px;
  left:171.5px;
  background:white;
  position:absolute;
  transform:rotate(180deg);
}

.base .bottom_base{
  position:absolute;
  width:90px;
  height:100px;
  left:162px;
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  border-bottom: 380px solid white;
  opacity:.8;
  z-index:-1;
  top:42.5px;
}

ul{
  position:absolute;
  top:180px;
  left:-30px;
}
li{
  width:10px;
  height:10px;
  background:white;
  padding:2px;
  display:block;
  margin: 30px;
  box-shadow: inset 0px -2px 0px lightgray; 
}

li:nth-child(2){
  position:absolute;
  top:-45px;
  left:20px;
}

li:nth-child(1){
  position:absolute;
  top:35px;
  left:50px;
}

li:nth-child(3){
  position:absolute;
  top:75px;
  left:50px;
}

@keyframes spin {
0% {
       transform:rotate(0deg);
 }
 100% {
       transform:rotate(-360deg);
 }
}

View Code

澳门新浦京手机版 6

在线演示 
      源码下载

澳门新浦京手机版 7

HTML5可爱的404页面动画 很逗的机器人

利用HTML5绘制的机器人,还会动哦。你可以将它作为一个富有创意的404页面。

核心CSS3代码:

澳门新浦京手机版 8澳门新浦京手机版 9

@-webkit-keyframes move {
  0%, 100% {
    -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    transform: rotate(0deg) translate3d(0px, 0px, 0px);
  }

  25% {
    -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px);
    transform: rotate(5deg) translate3d(5px, 5px, 0px);
  }

  75% {
    -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
    transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
  }
}

@keyframes move {
  0%, 100% {
    -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    transform: rotate(0deg) translate3d(0px, 0px, 0px);
  }

  25% {
    -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px);
    transform: rotate(5deg) translate3d(5px, 5px, 0px);
  }

  75% {
    -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
    transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
  }
}

View Code

澳门新浦京手机版 10

在线演示 
   
  源码下载

纯CSS3 3D图片翻转展示

这是一款基于CSS3的3D图片展示,在图片切换时将会有翻转的动画效果。

核心CSS代码:

澳门新浦京手机版 11澳门新浦京手机版 12

.coverflow-list {
  width: 100%;
}
.coverflow-list .coverflow-item {
  display: inline-block;
  background: #414141;
  margin: 0 -50px;
  position: relative;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.coverflow-list .coverflow-item .album-cover {
  display: block;
  height: 150px;
  margin: 0;
}
.coverflow-list .coverflow-item .album-cover img {
  height: 150px;
  width: 150px;
  opacity: 0.5;
}
.coverflow-list .coverflow-item .album-name {
  text-align: center;
  display: block;
  color: #444;
}
.coverflow-list .coverflow-item label {
  padding: 0;
  border: none;
  display: block;
  text-shadow: none;
}
/* Now apply 3D transforms (never done this before!) */
.coverflow-list {
  -webkit-transform: perspective(900px);
  -webkit-transform-style: preserve-3d;
  -webkit-perspective-origin: 100% 30%;
}
.coverflow-list .coverflow-item {
  -webkit-transition: all 0.4s ease;
  background: #212121;
  -webkit-transform: rotateY(45deg);
}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + .coverflow-item {
  -webkit-transform: rotateY(0deg);
  margin: 0 auto;
  background: #313131;
  transition: all 0.4s ease;
}
input[type="radio"]:checked + .coverflow-item img {
  opacity: 1;
}
input[type="radio"]:checked + .coverflow-item figcaption {
  color: #FFFFFF;
}
input[type="radio"]:checked + .coverflow-item ~ .coverflow-item {
  -webkit-transform: rotateY(-45deg);
  background: #515151;
}

View Code

澳门新浦京手机版 13

在线演示 
   
  源码下载

在线演示源码下载

HTML5/jQuery 3D焦点图插件 多种超酷切换动画

焦点图是很传统的jQuery插件,但是这款焦点图基于HTML5,动画特效更加丰富。

 

澳门新浦京手机版 14

在线演示     
  源码下载

漂亮的CSS3动画进度条

这是一款闪闪发光的CSS3进度条,进度条在初始化的时候还有滑动的动画特效。

核心jQuery代码:

澳门新浦京手机版 15澳门新浦京手机版 16

(function() {
  $(document).ready(function() {
    return $(".bar").each(function(i, elem) {
      return $(elem).addClass('active');
    });
  });

}).call(this);

View Code

澳门新浦京手机版 17

在线演示 
   
  源码下载

HTML代码

<div class="link-overlay">

</div>
<canvas id="canvas" style="background-color:#ddd"></canvas>

CSS3各大网站分享按钮 带网站Logo小图标

这些按钮样式非常丰富,而且还带有网站的Logo,这些超酷的按钮都是利用CSS3实现的。

核心CSS3代码:

澳门新浦京手机版 18澳门新浦京手机版 19

.zocial.icon {
    overflow: hidden;
    max-width: 2.4em;
    padding-left: 0;
    padding-right: 0;
    max-height: 2.15em;
    white-space: nowrap;
}
.zocial.icon:before {
    padding: 0;
    width: 2em;
    height: 2em;

    -webkit-box-shadow: none;

    box-shadow: none;
    border: none;
}
.zocial:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, transparent), to(rgba(0,0,0,.1)));
    background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1));
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.1)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, transparent), to(rgba(0,0,0,.1)));
    background-image: linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1));
}

View Code

澳门新浦京手机版 20

在线演示 
   
  源码下载

CSS3垂直图标菜单

这是一款简单而清爽的CSS3垂直菜单,鼠标滑过菜单项还有Tooltip的动画效果。

核心CSS代码:

澳门新浦京手机版 21澳门新浦京手机版 22

#nav-bar {
  margin: 50px 50px 50px 400px;
  max-width: 50px;
  border: 1px solid #bed1df;
  border-radius: 4%;
  background-color: white;
  -webkit-box-shadow: -2px 3px 2px 0px rgba(5, 0, 0, 0.11);
  -moz-box-shadow:    -2px 3px 2px 0px rgba(5, 0, 0, 0.11);
  box-shadow:         -2px 3px 2px 0px rgba(5, 0, 0, 0.11);
}

li {
   color: #bed1df;
   margin: 0;
   font-family: 'Open Sans', sans-serif;
   font-size: 0.75em;
   list-style: none;
}

li.level-one {
  font-size: 1.5em;
  text-align: center;
  border-top: 1px solid #bed1df;
  cursor: pointer;
}

li.level-one:first-child {
  border-top: none;
}

li.level-one:hover {
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(233,238,242,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9eef2', GradientType=0 );
}

#selected {
  background: #3f8eb9;
  -webkit-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45);
  -moz-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45);
  box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45);
}

i {
  color: #bed1df;
  margin: 25%;
}

p {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em; 
  color: #bed1df;
  margin: 50px;
}

a {
  color: #3f8eb9;
  text-decoration: none;
}

.level-one {
  position: relative;
}

.level-two {
  display: none;
  position: absolute;
  height: 50px;
  width: 100px;
  background: #FFFFFF;
  border-radius: 4px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.65em; 
  text-align: center;
}

.level-two:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 9px 9px 9px 0;
  border-color: transparent  #fff;
  display: block;
  width: 0;
  z-index: 1;
  left: -9px;
  top: 15px;
}

.level-two li {
  margin: 15px;
}

.level-one:hover > .level-two {
  display: block;
}

.level-two {
  left: 130%;
  top: 0;
}

View Code

澳门新浦京手机版 23

在线演示 
      源码下载

JavaScript代码

// bind to window onload handler
window.addEventListener('load', onloadHandler, false);

/**
 * Window onload handler
 */
function onloadHandler()
{
   var canvas = document.getElementById('canvas');
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
   var k3dmain = new K3D.Controller(canvas, true);

   // generate 3D objects

   var obj1 = new K3D.K3DObject();
   with (obj1)
   {
      drawmode = "solid";
      shademode = "lightsource";
      sortmode = "unsorted";
      addphi = -0.5;
      abouty = -90;
      perslevel = 1000;
      init(
         [{x:-80,y:180,z:0},{x:0,y:180,z:-80},{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:-50,y:150,z:-30},{x:0,y:150,z:-80},{x:0,y:130,z:-80},{x:-30,y:130,z:-50},{x:-28,y:110,z:-52},{x:0,y:110,z:-80},{x:0,y:90,z:-80},{x:-45,y:90,z:-35},{x:-44,y:80,z:-36},{x:-25,y:80,z:-55},{x:-22,y:66,z:-58},{x:0,y:60,z:-80},{x:0,y:40,z:-80},{x:-40,y:50,z:-40}],
         [],
         [{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[235,235,235],vertices:[4,5,6,7,8,9,10,11,4]},{color:[235,235,235],vertices:[12,13,14,15,16,17,12]}]
      );
   }
   k3dmain.addK3DObject(obj1);

   var obj2 = new K3D.K3DObject();
   with (obj2)
   {
      drawmode = "solid";
      shademode = "lightsource";
      sortmode = "unsorted";
      addphi = -0.5;
      abouty = -90;
      perslevel = 1000;
      init(
         [{x:0,y:180,z:-80},{x:80,y:180,z:0},{x:80,y:20,z:0},{x:0,y:0,z:-80},{x:0,y:165,z:-80},{x:68,y:165,z:-12},{x:55,y:35,z:-25},{x:0,y:20,z:-80},{x:0,y:150,z:-80},{x:50,y:150,z:-30},{x:47,y:130,z:-33},{x:0,y:130,z:-80},{x:0,y:110,z:-80},{x:45,y:110,z:-35},{x:40,y:50,z:-40},{x:0,y:40,z:-80},{x:0,y:60,z:-80},{x:20,y:66,z:-60},{x:23,y:90,z:-57},{x:0,y:90,z:-80}],
         [],
         [{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[240,101,41],vertices:[4,5,6,7,4]},{color:[235,235,235],vertices:[8,9,10,11,8]},{color:[235,235,235],vertices:[12,13,14,15,16,17,18,19,12]}]
      );
   }
   k3dmain.addK3DObject(obj2);

   var obj3 = new K3D.K3DObject();
   with (obj3)
   {
      drawmode = "solid";
      shademode = "lightsource";
      sortmode = "unsorted";
      addphi = -0.5;
      abouty = -90;
      perslevel = 1000;
      init(
         [{x:80,y:180,z:0},{x:0,y:180,z:80},{x:0,y:0,z:80},{x:80,y:20,z:0},{x:50,y:150,z:30},{x:0,y:150,z:80},{x:0,y:130,z:80},{x:30,y:130,z:50},{x:28,y:110,z:52},{x:0,y:110,z:80},{x:0,y:90,z:80},{x:45,y:90,z:35},{x:44,y:80,z:36},{x:25,y:80,z:55},{x:22,y:66,z:58},{x:0,y:60,z:80},{x:0,y:40,z:80},{x:40,y:50,z:40}],
         [],
         [{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[235,235,235],vertices:[4,5,6,7,8,9,10,11,4]},{color:[235,235,235],vertices:[12,13,14,15,16,17,12]}]
      );
   }
   k3dmain.addK3DObject(obj3);

   var obj4 = new K3D.K3DObject();
   with (obj4)
   {
      drawmode = "solid";
      shademode = "lightsource";
      sortmode = "unsorted";
      addphi = -0.5;
      abouty = -90;
      perslevel = 1000;
      init(
         [{x:0,y:180,z:80},{x:-80,y:180,z:0},{x:-80,y:20,z:0},{x:0,y:0,z:80},{x:0,y:165,z:80},{x:-68,y:165,z:12},{x:-55,y:35,z:25},{x:0,y:20,z:80},{x:0,y:150,z:80},{x:-50,y:150,z:30},{x:-47,y:130,z:33},{x:0,y:130,z:80},{x:0,y:110,z:80},{x:-45,y:110,z:35},{x:-40,y:50,z:40},{x:0,y:40,z:80},{x:0,y:60,z:80},{x:-20,y:66,z:60},{x:-23,y:90,z:57},{x:0,y:90,z:80}],
         [],
         [{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[240,101,41],vertices:[4,5,6,7,4]},{color:[235,235,235],vertices:[8,9,10,11,8]},{color:[235,235,235],vertices:[12,13,14,15,16,17,18,19,12]}]
      );
   }
   k3dmain.addK3DObject(obj4);

   var objBase = new K3D.K3DObject();
   with (objBase)
   {
      drawmode = "solid";
      shademode = "lightsource";
      sortmode = "unsorted";
      addphi = -0.5;
      abouty = -90;
      perslevel = 1000;
      init(
         [{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:0,y:0,z:80},{x:80,y:20,z:0}],
         [],
         [{color:[227,76,38],vertices:[0,2,1,0]},{color:[227,76,38],vertices:[0,3,2,0]}]
      );
   }
   k3dmain.addK3DObject(objBase);

   var objHtml = new K3D.K3DObject();
   with (objHtml)
   {
      drawmode = "solid";
      shademode = "lightsource";
      //sortmode = "unsorted";
      color = [64,64,64];
      doublesided = true;
      addphi = -0.5;
      abouty = 100;
      scale = 0.75;
      perslevel = 1000;
      init(
         [{x:-80,y:40,z:0},{x:-70,y:40,z:0},{x:-70,y:30,z:0},{x:-60,y:30,z:0},{x:-60,y:40,z:0},{x:-50,y:40,z:0},{x:-50,y:10,z:0},{x:-60,y:10,z:0},{x:-60,y:20,z:0},{x:-70,y:20,z:0},{x:-70,y:10,z:0},{x:-80,y:10,z:0},{x:-40,y:40,z:0},{x:-10,y:40,z:0},{x:-10,y:30,z:0},{x:-20,y:30,z:0},{x:-20,y:10,z:0},{x:-30,y:10,z:0},{x:-30,y:30,z:0},{x:-40,y:30,z:0},{x:0,y:40,z:0},{x:10,y:40,z:0},{x:20,y:30,z:0},{x:30,y:40,z:0},{x:40,y:40,z:0},{x:40,y:10,z:0},{x:30,y:10,z:0},{x:30,y:30,z:0},{x:20,y:20,z:0},{x:10,y:30,z:0},{x:10,y:10,z:0},{x:0,y:10,z:0},{x:50,y:40,z:0},{x:60,y:40,z:0},{x:60,y:20,z:0},{x:80,y:20,z:0},{x:80,y:10,z:0},{x:50,y:10,z:0}],
         [],
         [{vertices:[0,1,2,3,4,5,6,7,8,9,10,11,0]},{vertices:[12,13,14,15,16,17,18,19,12]},{vertices:[20,21,22,23,24,25,26,27,28,29,30,31,20]},{vertices:[32,33,34,35,36,37,32]}]
      );
   }
   k3dmain.addK3DObject(objHtml);

   // add render loop callback
   var ctx = canvas.getContext('2d');
   var rotationOffset = 0;
   var len = (canvas.height > canvas.width ? canvas.height : canvas.width) * 0.7;
   k3dmain.clearBackground = false;
   k3dmain.callback = function()
   {
      // manually clear bg - as we want to render some extra goodies
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // draw bg effect before K3D does its 3D rendering
      ctx.save();
      ctx.translate(canvas.width/2, canvas.height/2);
      ctx.rotate(rotationOffset);

      // first fill pass - outer rays
      var RAYCOUNT = 24;
      ctx.fillStyle = "#eee";
      ctx.beginPath();
      for (var i=0; i<RAYCOUNT; i++)
      {
         // rotate context
         ctx.rotate(TWOPI / RAYCOUNT);
         ctx.moveTo(0, 0);
         ctx.lineTo(-20, len);
         ctx.lineTo(20, len);
      }
      ctx.closePath();
      ctx.fill();
      // second fill pass - inner rays
      ctx.fillStyle = "#fff";
      ctx.beginPath();
      for (var i=0; i<RAYCOUNT; i++)
      {
         // rotate context
         ctx.rotate(TWOPI / RAYCOUNT);
         ctx.moveTo(0, 0);
         ctx.lineTo(-15, len);
         ctx.lineTo(15, len);
      }
      ctx.closePath();
      ctx.fill();
      ctx.restore();
      rotationOffset += 0.005;

      // apply user interaction to rotation
      for (var i=0, objs=k3dmain.objects; i<objs.length; i++)
      {
         objs[i].ophi += targetRotationX;
      }

      if (targetRotationX > -0.5) targetRotationX -= 0.05;
      else if (targetRotationX < -0.55) targetRotationX += 0.05;
      if (targetRotationX > -0.55 && targetRotationX < -0.5) targetRotationX = -0.5;
   };

   // start demo loop
   k3dmain.paused = true;
   setInterval(function(){k3dmain.tick()}, 1000/60);
}

// nifty drag/touch event capture code borrowed from Mr Doob http://mrdoob.com/
var targetRotationX = 0;
var targetRotationOnMouseDownX = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var targetRotationY = 0;
var targetRotationOnMouseDownY = 0;
var mouseY = 0;
var mouseYOnMouseDown = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);

function onDocumentMouseDown( event ) {

    event.preventDefault();

    document.addEventListener('mousemove', onDocumentMouseMove, false);
    document.addEventListener('mouseup', onDocumentMouseUp, false);
    document.addEventListener('mouseout', onDocumentMouseOut, false);

    mouseXOnMouseDown = event.clientX - windowHalfX;
    targetRotationOnMouseDownX = targetRotationX;
    mouseYOnMouseDown = event.clientY - windowHalfY;
    targetRotationOnMouseDownY = targetRotationY;
}

function onDocumentMouseMove( event )
{
    mouseX = event.clientX - windowHalfX;
    targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.02;
    mouseY = event.clientY - windowHalfY;
    targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.02;
}

function onDocumentMouseUp( event )
{
    document.removeEventListener('mousemove', onDocumentMouseMove, false);
    document.removeEventListener('mouseup', onDocumentMouseUp, false);
    document.removeEventListener('mouseout', onDocumentMouseOut, false);
}

function onDocumentMouseOut( event )
{
    document.removeEventListener('mousemove', onDocumentMouseMove, false);
    document.removeEventListener('mouseup', onDocumentMouseUp, false);
    document.removeEventListener('mouseout', onDocumentMouseOut, false);
}

function onDocumentTouchStart( event )
{
    if (event.touches.length == 1)
    {
        event.preventDefault();

        mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
        targetRotationOnMouseDownX = targetRotationX;
        mouseYOnMouseDown = event.touches[0].pageY - windowHalfY;
        targetRotationOnMouseDownY = targetRotationY;
    }
}

function onDocumentTouchMove( event )
{
    if (event.touches.length == 1)
    {
        event.preventDefault();

        mouseX = event.touches[0].pageX - windowHalfX;
        targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.05;
        mouseY = event.touches[0].pageY - windowHalfY;
        targetRotationY = targetRotationOnMouseDownY + (mouseX - mouseYOnMouseDown) * 0.05;
    }
}

在线演示源码下载

HTML5 SVG环形图表应用 很酷的数据初始动画

很有创意的HTML5图表应用,图表是环形的,初始化时的动画效果也非常不错。

核心jQuery代码:

澳门新浦京手机版 24澳门新浦京手机版 25

$(function(){
  $("#doughnutChart").drawDoughnutChart([
    { title: "Tokyo",         value : 120,  color: "#2C3E50" },
    { title: "San Francisco", value:  80,   color: "#FC4349" },
    { title: "New York",      value:  70,   color: "#6DBCDB" },
    { title: "London",        value : 50,   color: "#F7E248" },
    { title: "Sydney",        value : 40,   color: "#D7DADB" },
    { title: "Berlin",        value : 20,   color: "#FFF" }
  ]);
});
/*!
 * jquery.drawDoughnutChart.js
 * Version: 0.3(Beta)
 * Inspired by Chart.js(http://www.chartjs.org/)
 *
 * Copyright 2013 hiro
 * https://github.com/githiro/drawDoughnutChart
 * Released under the MIT license.
 * 
 */
;(function($, undefined) {
  $.fn.drawDoughnutChart = function(data, options) {
    var $this = this,
      W = $this.width(),
      H = $this.height(),
      centerX = W/2,
      centerY = H/2,
      cos = Math.cos,
      sin = Math.sin,
      PI = Math.PI,
      settings = $.extend({
        segmentShowStroke : true,
        segmentStrokeColor : "#0C1013",
        segmentStrokeWidth : 1,
        baseColor: "rgba(0,0,0,0.5)",
        baseOffset: 4,
        edgeOffset : 10,//offset from edge of $this
        percentageInnerCutout : 75,
        animation : true,
        animationSteps : 90,
        animationEasing : "easeInOutExpo",
        animateRotate : true,
        tipOffsetX: -8,
        tipOffsetY: -45,
        tipClass: "doughnutTip",
        summaryClass: "doughnutSummary",
        summaryTitle: "TOTAL:",
        summaryTitleClass: "doughnutSummaryTitle",
        summaryNumberClass: "doughnutSummaryNumber",
        beforeDraw: function() {  },
        afterDrawed : function() {  },
        onPathEnter : function(e,data) {  },
        onPathLeave : function(e,data) {  }
      }, options),
      animationOptions = {
        linear : function (t) {
          return t;
        },
        easeInOutExpo: function (t) {
          var v = t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t;
          return (v>1) ? 1 : v;
        }
      },
      requestAnimFrame = function() {
        return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
      }();

    settings.beforeDraw.call($this);

    var $svg = $('<svg width="' + W + '" height="' + H + '" viewBox="0 0 ' + W + ' ' + H + '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>').appendTo($this),
        $paths = [],
        easingFunction = animationOptions[settings.animationEasing],
        doughnutRadius = Min([H / 2,W / 2]) - settings.edgeOffset,
        cutoutRadius = doughnutRadius * (settings.percentageInnerCutout / 100),
        segmentTotal = 0;

    //Draw base doughnut
    var baseDoughnutRadius = doughnutRadius + settings.baseOffset,
        baseCutoutRadius = cutoutRadius - settings.baseOffset;
    var drawBaseDoughnut = function() {
        //Calculate values for the path.
        //We needn't calculate startRadius, segmentAngle and endRadius, because base doughnut doesn't animate.
        var startRadius = -1.570,// -Math.PI/2
            segmentAngle = 6.2831,// 1 * ((99.9999/100) * (PI*2)),
            endRadius = 4.7131,// startRadius + segmentAngle
            startX = centerX + cos(startRadius) * baseDoughnutRadius,
            startY = centerY + sin(startRadius) * baseDoughnutRadius,
            endX2 = centerX + cos(startRadius) * baseCutoutRadius,
            endY2 = centerY + sin(startRadius) * baseCutoutRadius,
            endX = centerX + cos(endRadius) * baseDoughnutRadius,
            endY = centerY + sin(endRadius) * baseDoughnutRadius,
            startX2 = centerX + cos(endRadius) * baseCutoutRadius,
            startY2 = centerY + sin(endRadius) * baseCutoutRadius;
        var cmd = [
          'M', startX, startY,
          'A', baseDoughnutRadius, baseDoughnutRadius, 0, 1, 1, endX, endY,
          'L', startX2, startY2,
          'A', baseCutoutRadius, baseCutoutRadius, 0, 1, 0, endX2, endY2,//reverse
          'Z'
        ];
        $(document.createElementNS('http://www.w3.org/2000/svg', 'path'))
          .attr({
            "d": cmd.join(' '),
            "fill": settings.baseColor
          })
          .appendTo($svg);
    }();

    //Set up pie segments wrapper
    var $pathGroup = $(document.createElementNS('http://www.w3.org/2000/svg', 'g'));
    $pathGroup.attr({opacity: 0}).appendTo($svg);

    //Set up tooltip
    var $tip = $('<div class="' + settings.tipClass + '" />').appendTo('body').hide(),
        tipW = $tip.width(),
        tipH = $tip.height();

    //Set up center text area
    var summarySize = (cutoutRadius - (doughnutRadius - cutoutRadius)) * 2,
        $summary = $('<div class="' + settings.summaryClass + '" />')
                   .appendTo($this)
                   .css({ 
                     width: summarySize + "px",
                     height: summarySize + "px",
                     "margin-left": -(summarySize / 2) + "px",
                     "margin-top": -(summarySize / 2) + "px"
                   });
    var $summaryTitle = $('<p class="' + settings.summaryTitleClass + '">' + settings.summaryTitle + '</p>').appendTo($summary);
    var $summaryNumber = $('<p class="' + settings.summaryNumberClass + '"></p>').appendTo($summary).css({opacity: 0});

    for (var i = 0, len = data.length; i < len; i++) {
      segmentTotal += data[i].value;
      $paths[i] = $(document.createElementNS('http://www.w3.org/2000/svg', 'path'))
        .attr({
          "stroke-width": settings.segmentStrokeWidth,
          "stroke": settings.segmentStrokeColor,
          "fill": data[i].color,
          "data-order": i
        })
        .appendTo($pathGroup)
        .on("mouseenter", pathMouseEnter)
        .on("mouseleave", pathMouseLeave)
        .on("mousemove", pathMouseMove);
    }

    //Animation start
    animationLoop(drawPieSegments);

    function pathMouseEnter(e) {
      var order = $(this).data().order;
      $tip.text(data[order].title + ": " + data[order].value)
          .fadeIn(200);
      settings.onPathEnter.apply($(this),[e,data]);
    }
    function pathMouseLeave(e) {
      $tip.hide();
      settings.onPathLeave.apply($(this),[e,data]);
    }
    function pathMouseMove(e) {
      $tip.css({
        top: e.pageY + settings.tipOffsetY,
        left: e.pageX - $tip.width() / 2 + settings.tipOffsetX
      });
    }
    function drawPieSegments (animationDecimal) {
      var startRadius = -PI / 2,//-90 degree
          rotateAnimation = 1;
      if (settings.animation && settings.animateRotate) rotateAnimation = animationDecimal;//count up between0~1

      drawDoughnutText(animationDecimal, segmentTotal);

      $pathGroup.attr("opacity", animationDecimal);

      //draw each path
      for (var i = 0, len = data.length; i < len; i++) {
        var segmentAngle = rotateAnimation * ((data[i].value / segmentTotal) * (PI * 2)),
            endRadius = startRadius + segmentAngle,
            largeArc = ((endRadius - startRadius) % (PI * 2)) > PI ? 1 : 0,
            startX = centerX + cos(startRadius) * doughnutRadius,
            startY = centerY + sin(startRadius) * doughnutRadius,
            endX2 = centerX + cos(startRadius) * cutoutRadius,
            endY2 = centerY + sin(startRadius) * cutoutRadius,
            endX = centerX + cos(endRadius) * doughnutRadius,
            endY = centerY + sin(endRadius) * doughnutRadius,
            startX2 = centerX + cos(endRadius) * cutoutRadius,
            startY2 = centerY + sin(endRadius) * cutoutRadius;
        var cmd = [
          'M', startX, startY,//Move pointer
          'A', doughnutRadius, doughnutRadius, 0, largeArc, 1, endX, endY,//Draw outer arc path
          'L', startX2, startY2,//Draw line path(this line connects outer and innner arc paths)
          'A', cutoutRadius, cutoutRadius, 0, largeArc, 0, endX2, endY2,//Draw inner arc path
          'Z'//Cloth path
        ];
        $paths[i].attr("d", cmd.join(' '));
        startRadius += segmentAngle;
      }
    }

    function drawDoughnutText(animationDecimal, segmentTotal) {
      $summaryNumber
        .css({opacity: animationDecimal})
        .text((segmentTotal * animationDecimal).toFixed(1));
    }
    function animateFrame(cnt, drawData) {
      var easeAdjustedAnimationPercent =(settings.animation)? CapValue(easingFunction(cnt), null, 0) : 1;
      drawData(easeAdjustedAnimationPercent);
    }
    function animationLoop(drawData) {
      var animFrameAmount = (settings.animation)? 1 / CapValue(settings.animationSteps, Number.MAX_VALUE, 1) : 1,
          cnt =(settings.animation)? 0 : 1;
      requestAnimFrame(function() {
          cnt += animFrameAmount;
          animateFrame(cnt, drawData);
          if (cnt <= 1) {
            requestAnimFrame(arguments.callee);
          } else {
            settings.afterDrawed.call($this);
          }
      });
    }
    function Max(arr) {
      return Math.max.apply(null, arr);
    }
    function Min(arr) {
      return Math.min.apply(null, arr);
    }
    function isNumber(n) {
      return !isNaN(parseFloat(n)) && isFinite(n);
    }
    function CapValue(valueToCap, maxValue, minValue) {
      if (isNumber(maxValue) && valueToCap > maxValue) return maxValue;
      if (isNumber(minValue) && valueToCap < minValue) return minValue;
      return valueToCap;
    }
    return $this;
  };
})(jQuery);

View Code

澳门新浦京手机版 26

在线演示 
      源码下载

纯CSS3背景渐变按钮 按钮图标淡入淡出动画

这是一组带有动画效果的HTML5按钮,鼠标滑过按钮时将出现背景渐变的动画特效。

核心CSS代码:

澳门新浦京手机版 27澳门新浦京手机版 28

.test{
    width:320px;
    height:90px;
    margin:30px auto;
    background:-webkit-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:-moz-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:-ms-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:-o-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:#A9DB80;
    box-shadow:0 0 3px #999;
    border-radius:3px;
    transition:1s all ease;
    -webkit-transition:0.5s all ease;
    -moz-transition:0.5s all ease;
    -ms-transition:0.5s all ease;
    -o-transition:0.5s all ease;
    overflow:hidden;
}
.test .aLink{
    display:block;
    width:318px;
    height:88px;
    background:-webkit-linear-gradient(center top , #FFF 2%);
    background:-moz-linear-gradient(center top , #FFF 2%);
    background:-ms-linear-gradient(center top , #FFF 2%);
    background:-o-linear-gradient(center top , #FFF 2%);
    box-shadow:0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
    border-radius:3px;
    -webkit-border-radius:3px;
    -ms-border-radius:3px;
    position:relative;
    text-decoration:none;
    border:#484848 solid 1px;
    overflow:hidden;

}
.test .aLink .txt{
    position:absolute;
    font-size:28px;
    color:#6D954E;
    left:18px;
    top:26px;
    opacity:0;
    -webkit-transition:0.2s all ease;
    -moz-transition:0.2s all ease;
    -ms-transition:0.2s all ease;
    -o-transition:0.2s all ease;
    transition:0.2s all ease;
}
.test .aLink .img{
    position:absolute;
    width:70px;
    height:70px;
    display:block;
    z-index:2;
    top:12px;
    left:10px;
    -webkit-transition:0.2s all ease;
    -moz-transition:0.2s all ease;
    -ms-transition:0.2s all ease;
    -o-transition:0.2s all ease;
    transition:0.2s all ease;
}
.test .aLink .txt2{
    font-size:32px;
    color:#FFF;
    width:140px;
    overflow:hidden;
    display:block;
    text-shadow:0 0 2px #999999;
    position:absolute;
    left:80px;
    text-align:center;
    top:10px;
    font-family:"Comic Sans MS", cursive;
}
.test .aLink .txt2 span{
    font-size:14px;
    color:#FFF;
    display:block;
}
.test .aLink .btn{
    width:80px;
    display:block;
    height:88px;
    position:absolute;
    right:0;
    top:0;
    border-left:#484848 solid 1px;
    box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -webkit-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -ms-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -moz-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -o-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
}
.test .aLink .btn span{
    display:block;
    width:40px;
    height:40px;
    background:url(img/arrow_down.png) center center no-repeat #333;
    margin:24px auto;
    border-radius:50%;
    -webkit-transition:0.3s all ease;
    -moz-transition:0.3s all ease;
    -ms-transition:0.3s all ease;
    -o-transition:0.3s all ease;
}

/*动画*/
.test:hover{
    box-shadow:0 0 10px #666;
    box-shadow:0 0 10px #666;
}
.test:hover .img{
    width:150px;
    height:150px;
    left:-26px;
    top:-30px;
    opacity:0;
}
.test:hover .txt{
    opacity:1;
}

.test:active{
    box-shadow:0 0 0px #999;
    background:-webkit-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
    background:-moz-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
    background:-ms-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
    background:-o-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
}
.test:active .aLink{
    box-shadow:inset 2px 2px 3px #666666;
}
.test:active .btn{
    box-shadow:inset 1px 1px 1px #666666;
    box-shadow:inset 1px 1px 1px #666666);
}
.test:active .txt{
    color:#A9DB80;
}
.test:active .btn span{
    width:60px;
    height:60px;
    margin-top:15px;
    background-size:60%;
}

View Code

澳门新浦京手机版 29

在线演示     
  源码下载

HTML5迷你音乐播放器 3D翻转播放按钮

很有创意的HTML5音乐播放器,而且播放按钮还有3D的动画效果,整个播放器也是相当迷你。

核心jQuery代码:

澳门新浦京手机版 30澳门新浦京手机版 31

// Most of this is all Dave Rupert
// See http://codepen.io/davatron5000/pen/uqktG

(function(){
  $(".play-pause").click(function() {

   if($(this).hasClass('pausing')){
      $(this).removeClass('pausing');
      $(this).addClass('playing');
      $(this).css("background-image", "url(http://dev.steelehouse.com/codepen/play-to-pause-faster.gif)");
      audio.play();
  }
  else if($(this).hasClass('playing')){
      $(this).removeClass('playing');
      $(this).addClass('pausing');
      $(this).css("background-image", "url(http://dev.steelehouse.com/codepen/pause-to-play-faster.gif)");
      audio.pause();
  }
  else {
    $(this).addClass('playing');
    $(this).css("background-image", "url(http://dev.steelehouse.com/codepen/play-to-pause-faster.gif)");
    audio.play();
  }

});



  var pcastPlayers = document.querySelectorAll('.player-container');
  var speeds = [ 1, 1.5, 2, 2.5, 3, 0.5 ]    

  for(i=0;i<pcastPlayers.length;i++) {
    var player = pcastPlayers[i];
    var audio = player.querySelector('audio');/*
    var play = player.querySelector('.play-pause.playing');
    var pause = player.querySelector('.play-pause.pausing');*/



    var progress = player.querySelector('.pcast-progress');

    var currentTime = player.querySelector('.pcast-currenttime');

    var currentSpeedIdx = 0;


    var toHHMMSS = function ( totalsecs ) {
        var sec_num = parseInt(totalsecs, 10); // don't forget the second param
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if (hours   < 10) {hours   = "0"+hours; }
        if (minutes < 10) {minutes = ""+minutes;}
        if (seconds < 10) {seconds = "0"+seconds;}

        var time = hours+':'+minutes+':'+seconds;
        if (hours   <= 1) { var time = minutes+':'+seconds; }

        return time;
    }

    audio.addEventListener('loadedmetadata', function(){
      progress.setAttribute('max', Math.floor(audio.duration));
      duration.textContent  = toHHMMSS(audio.duration);
    });

    audio.addEventListener('timeupdate', function(){
      progress.setAttribute('value', audio.currentTime);
      currentTime.textContent  = toHHMMSS(audio.currentTime);
    });

/*    play.addEventListener('click', function(){
      this.style.display = 'none';
      pause.style.display = 'inline-block';
      pause.focus();
      audio.play();
    }, false);

    pause.addEventListener('click', function(){
      this.style.display = 'none';
      play.style.display = 'inline-block';
      play.focus();
      audio.pause();
    }, false);
*/

    progress.addEventListener('click', function(e){
      audio.currentTime = Math.floor(audio.duration) * (e.offsetX / e.target.offsetWidth);
    }, false);



  }
})(this);

View Code

澳门新浦京手机版 32

在线演示 
   
  源码下载

动感的CSS3 Loading文字特效

澳门新浦京手机版 33

在线演示 
   
  源码下载

HTML5/CSS3实现蝙蝠侠人物动画 蜘蛛侠变身

用CSS3实现的人物拼接动画,效果非常不错。

核心CSS3代码:

澳门新浦京手机版 34澳门新浦京手机版 35

@-webkit-keyframes ani-head-1-0 {
    0% {
        -webkit-transform: translate3d(-322.74999999999994px, 121.99999999999994px, 0px);
        background-color: rgba(53,53,53,1);
    }

    98.912% {
        -webkit-transform: translate3d(67px, 123px, 0px);
        background-color: rgba(53,53,53,1);
    }

    100% {
        -webkit-transform: translate3d(67px, 123px, 0px);
        background-color: rgba(53,53,53,1);
    }
}

@keyframes ani-head-1-0 {
    0% {
        transform: translate3d(-322.74999999999994px, 121.99999999999994px, 0px);
        background-color: rgba(53,53,53,1);
    }

    98.912% {
        transform: translate3d(67px, 123px, 0px);
        background-color: rgba(53,53,53,1);
    }

    100% {
        transform: translate3d(67px, 123px, 0px);
        background-color: rgba(53,53,53,1);
    }
}

View Code

澳门新浦京手机版 36

在线演示 
      源码下载

纯CSS3实现滑杆开关切换按钮动画

很不错的自定义radiobox效果,非常有创意

澳门新浦京手机版 37澳门新浦京手机版 38

.switch {
    display: inline-block;
    margin: 10em 2em;
    position: relative;
    border-radius: 3.5em;
    -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
    -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
    box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
}

.switch label {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.switch input {
    display: none;
}

.switch span {
    display: block;
    -webkit-transition: top 0.2s;
    -moz-transition: top 0.2s;
    -ms-transition: top 0.2s;
    -o-transition: top 0.2s;
    transition: top 0.2s;
}

.switch-border1 {
    border: 0.1em solid #000;
    border-radius: 3.5em;
    -webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
    -moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
    box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
}

.switch-border2 {
    width: 6.6em;
    height: 12.6em;
    position: relative;
    border: 0.1em solid #323232;
    background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
    background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
    border-radius: 3.4em;
}

.switch-border2:before,
.switch-border2:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: .3;
    border-radius: 3.4em;
}

.switch-border2:before {
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));
    background: -webkit-linear-gradient(#000, rgba(0,0,0,0));
    background: -moz-linear-gradient(#000, rgba(0,0,0,0));
    background: -ms-linear-gradient(#000, rgba(0,0,0,0));
    background: -o-linear-gradient(#000, rgba(0,0,0,0));
    background: linear-gradient(#000, rgba(0,0,0,0));
}

.switch-border2:after {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));
    background: -webkit-linear-gradient(rgba(0,0,0,0), #000);
    background: -moz-linear-gradient(rgba(0,0,0,0), #000);
    background: -ms-linear-gradient(rgba(0,0,0,0), #000);
    background: -o-linear-gradient(rgba(0,0,0,0), #000);
    background: linear-gradient(rgba(0,0,0,0), #000);
}

.switch-top {
    width: 100%;
    height: 84%;
    position: absolute;
    top: 8%;
    left: 0;
    z-index: 1;
    background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
    background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
    border-radius: 3.4em;
}

.switch-shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    border-radius: 3.4em;
    -webkit-box-shadow: 0 0 2em black inset;
    -moz-box-shadow: 0 0 2em black inset;
    box-shadow: 0 0 2em black inset;
}

.switch-handle-left,
.switch-handle-right {
    content: '';
    display: block;
    width: 3.6em;
    height: 0;
    position: absolute;
    top: 6.6em;
    z-index: 2;
    border-bottom: 4.5em solid #111;
    border-left: 0.7em solid transparent;
    border-right: 0.7em solid transparent;
    border-radius: 0;
}

.switch-handle-left {
    left: 0.8em;
}

.switch-handle-right {
    right: 0.8em;
}

.switch-handle {
    width: 3.6em;
    height: 4.5em;
    position: absolute;
    top: 6.6em;
    left: 1.5em;
    z-index: 3;
    background: #333;
    background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
    background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
    border-radius: 0;
}

.switch-handle-top {
    width: 5em;
    height: 5em;
    position: absolute;
    top: 8.5em;
    left: 0.8em;
    z-index: 4;
    background-color: #555;
    background-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787));
    background-image: -webkit-linear-gradient(left, #5F5F5F, #878787);
    background-image: -moz-linear-gradient(left, #5F5F5F, #878787);
    background-image: -ms-linear-gradient(left, #5F5F5F, #878787);
    background-image: -o-linear-gradient(left, #5F5F5F, #878787);
    background-image: linear-gradient(to right, #5F5F5F, #878787);
    border-top: 0.2em solid #AEB2B3;
    border-radius: 2.5em;
}

.switch-handle-bottom {
    width: 3.6em;
    height: 3.6em;
    position: absolute;
    top: 4.7em;
    left: 1.5em;
    z-index: 3;
    background: #333;
    background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
    background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
    border-top: 0.2em solid #141414;
    border-radius: 1.8em;
}

.switch-handle-base {
    width: 4.2em;
    height: 4.2em;
    position: absolute;
    top: 3.8em;
    left: 1.2em;
    z-index: 2;
    border-top: 0.2em solid rgba(255,255,255,0.35);
    border-radius: 2.1em;
    -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
    -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
    box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
}

.switch-led {
    position: absolute;
    left: 2em;
    border-radius: 1.4em;
}

.switch-led-border {
    border: 0.2em solid black;
    border-radius: 1.3em;
}

.switch-led-light {
    border-radius: 1.1em;
    -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
    -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
    box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
}

.switch-led-glow {
    width: 2em;
    height: 2em;
    position: relative;
    border-radius: 1em;
}

.switch-led-glow:before {
    content: '';
    display: block;
    width: 0.6em;
    height: 0.6em;
    position: absolute;
    top: 0.3em;
    left: 0.7em;
    background: rgba(255,255,255,0.2);
    border-radius: 0.3em;
    -webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);
    -moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);
    box-shadow: 0 0 1em rgba(255,255,255,0.75);
}

.switch-led-glow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
    filter: alpha(opacity=20);
    border: 1em solid #fff;
    border-color: transparent #fff transparent #fff;
    border-radius: 1em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.switch-led:after {
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    color: #666;
    font-family: arial, verdana, sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0.1em rgba(0,0,0,0.7);
}

.switch-led-green:after {
    content: 'ON';
    top: -1.8em;
}

.switch-led-red:after {
    content: 'OFF';
    bottom: -1.8em;
}

.switch-led-green {
    top: -5em;
    border-top: 0.1em solid rgba(0,161,75,0.5);
    border-bottom: 0.1em solid rgba(255,255,255,0.25);
}

.switch-led-green .switch-led-light {
    background: rgb(0,161,75);
    border: 0.1em solid rgb(0,104,56);
}

.switch-led-red {
    bottom: -5em;
    border-top: 0.1em solid rgba(237,28,36,0.2);
    border-bottom: 0.1em solid rgba(255,255,255,0.25);
    -webkit-box-shadow: 0 0 3em rgb(237,28,36);
    -moz-box-shadow: 0 0 3em rgb(237,28,36);
    box-shadow: 0 0 3em rgb(237,28,36);
}

.switch-led-red .switch-led-light {
    background: rgb(237,28,36);
    border: 0.1em solid rgb(161,30,45);
}

.switch-led-red .switch-led-glow {
    background: #fff;
    background: rgba(255, 255, 255, 0.3);
    filter: alpha(opacity=30);
}

/* Switch on */

.switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right {
    top: 1.5em;
    border-bottom: 0;
    border-top: 4.5em solid #111;
}

.switch input:checked~.switch-handle {
    top: 1.5em;
}

.switch input:checked~.switch-handle-top  {
    top: -1em;
    border-top: 0;
    border-bottom: 0.2em solid #AEB2B3;
}

.switch input:checked~.switch-handle-bottom {
    top: 4.2em;
    border-top: 0;
    border-bottom: 0.2em solid #141414;
}

.switch input:checked~.switch-handle-base {
    top: 4.5em;
    border-top: 0;
    border-bottom: 0.2em solid rgba(255,255,255,0.35);
}

.switch input:checked~.switch-led-green {
    -webkit-box-shadow: 0 0 3em rgb(0,161,75);
    -moz-box-shadow: 0 0 3em rgb(0,161,75);
    box-shadow: 0 0 3em rgb(0,161,75);
}

.switch input:checked~.switch-led-green .switch-led-glow {
    background: #fff;
    background: rgba(255, 255, 255, 0.4);
    filter: alpha(opacity=40);
}

.switch input:checked~.switch-led-red {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.switch input:checked~.switch-led-red .switch-led-glow {
    background: rgba(255, 255, 255, 0);
    filter: alpha(opacity=0);
}

View Code

澳门新浦京手机版 39

在线演示 
      源码下载

HTML5/CSS3多颜色柱状图表 带基准数据线

这款是基于HTML5的水平柱形图,带有基准线。

核心jQuery代码:

澳门新浦京手机版 40澳门新浦京手机版 41

$(document).ready(function(){
  $('.bar').each(function(i, elem){
    drawBar(elem);
  });

  $('.measure').each(function(i, elem){
    drawMeasure(elem);
  });

  $('a.redraw').click(function(e){
    e.preventDefault();
    $('.bar').each(function(i, elem){
      randomiseBar(elem);
    });
    $('.measure').each(function(i, elem){
      randomiseMeasure(elem);
    });

  });

  function drawBar(bar) {
    var percentage = $(bar).data('percentage');
    if(percentage > 100){
      percentage = 100;
    }
    $(bar).animate({'width': percentage + '%'}, 'slow');
  }

  function randomiseBar(bar) {
    var width =  Math.floor(Math.random() * (100 - 20 + 1)) + 20;
    $(bar).animate({'width': width + '%'}, 'slow');
    $(bar).attr('data-percentage', width);
  }

  function drawMeasure(measure) {
    var percentage = $(measure).data('percentage');
    if(percentage > 100){
      percentage = 100;
    }
    $(measure).animate({'width': percentage + '%'}, 'slow');
  }

  function randomiseMeasure(measure) {
    var width =  Math.floor(Math.random() * (100 - 20 + 1)) + 20;
    $(measure).animate({'width': width + '%'}, 'slow');
    $(measure).attr('data-percentage', width);
  }


});

View Code

澳门新浦京手机版 42

在线演示 
   
  源码下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注