惊艳的HTML5动画特效及源码

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

澳门新浦京电子游戏 1

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

HTML5目前已经逐渐成熟,越来越多的Web项目都已经用到了HTML5技术,包括CSS3。本文主要分享了一些最新的HTML5动画应用,大部分都比较炫酷,也有一些比较实用的,并且每一个动画都提供源代码下载。

今天我们要来分享12款实用的HTML5应用插件,内容涉及到按钮、表单、进度条、图片等,大家一起来看看这些干货吧。1、漂亮的CSS3动画进度条,可自定义进度条颜色今天我们要再来分享一款很漂亮的CSS3动画进度条,我们可以用它来显示每一项数据的所占的比例,效果很不错。在线演示
/
源码下载2、CSS3垂直图标菜单,带Tooltip提示框今天我们要来分享一款CSS3菜单,菜单外观很漂亮,是垂直排列的小图标,鼠标滑过菜单项时,菜单项的背景会填充渐变的颜色,另外还会弹出该菜单项描述的Tooltip提示框。在线演示
/
源码下载3、纯CSS3背景渐变按钮,按钮图标淡入淡出动画今天我们要再来分享一款纯CSS3实现的按钮动画,这款按钮动画有以下特点:当鼠标滑过按钮时,按钮上的小图标便会以爆炸的方式淡出按钮,取代它的时相应的文字,当鼠标离开按钮时,小图标又会以爆炸的方式淡入按钮中。在线演示
/ 源码下载4、HTML5 3D立方体旋转动画今天我们再来分享一款绚丽的HTML5
3D立方体旋转动画,这款立方体的色彩看上去非常艳丽,旋转起来的动画效果也十分流畅。是一款很不错的HTML5
3D动画效果。在线演示 / 源码下载5、动感的CSS3
Loading文字特效
这是一款非常帅的CSS3
Loading加载动画,尽管看上去只有Loading这几个字母,但是利用CSS3特性,可以把这几个字母渲染得非常动感。在线演示
/
源码下载6、CSS3多样式小图标按钮,带分享按钮今天我们要来分享一款样式非常丰富的CSS3按钮特效,这些按钮的外观有点仿谷歌的风格,而且每一个按钮带有个性的小图标。另外按钮有一个特点,还可以定制出不错的分享按钮。在线演示
/
源码下载7、纯CSS3实现滑杆开关切换按钮动画今天我们要再来分享一款纯CSS3实现滑杆开关切换按钮动画,这个按钮是一个摇杆,杆子推上推下来切换开关状态,不同的开关状态也有不同颜色的指示灯。在线演示
/
源码下载8、HTML5/CSS3牙刷动画,模拟真实刷牙效果今天我们再要来分享一款不错的HTML5/CSS3动画效果,你一个可爱的牙刷,牙刷外观是利用纯CSS3绘制出来的,也比较简单。另外是刷牙动画,看起来非常搞笑,像真的刷牙一样,左刷刷,右刷刷,非常可爱的牙刷动画。在线演示
/
源码下载9、CSS3可视化网页编辑器,基于tinymce编辑器今天我们要来分享一款基于tinymce的CSS3可视化网页编辑器,编辑器功能相当完善,可以对文本进行各种操作,也可以添加链接和对齐文本。是一款功能更加强大网页编辑器。在线演示
/
源码下载10、CSS3实现一款联系表单,输入框带小图标今天我们再来分享一款外观还不错的CSS3联系表单,这款CSS3联系表单的输入框带有小图标,并且在提交信息时能校验输入的信息。在线演示
/
源码下载11、HTML5/CSS3多颜色柱状图表,带基准数据线这次要分享的HTML5柱状图表也非常不错,它有多种颜色来表示不同的数据。最大的特点是这款HTML5带有基准数据线,可以直观地看到每个数据项相对基准值的偏差。在线演示
/
源码下载12、HTML5/CSS3图片描述效果,文字描述浮动在图片上今天要分享一款基于HTML5和CSS3的图片特效,该图片特效非常实用,可以让你网页上的图片在鼠标滑过时在图片上方浮现一些描述文字,该描述文字在展现出来的时候有淡入淡出的动画效果,同时描述文字的样式也可以自定义多样化,是一款非常不错的HTML5图片特效。在线演示
/ 源码下载本文由html5tricks收集整理,原文链接:

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

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

核心CSS代码:

澳门新浦京电子游戏 2澳门新浦京电子游戏 3

.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

澳门新浦京电子游戏 4

在线演示        源码下载

1、HTML5 Canvas实现画板涂鸦动画应用

这是一款HTML5网络画板,拥有基础的图形绘制功能,相对比较简单,基于canvas,因此非常灵活。

澳门新浦京电子游戏 5

在线演示源码下载

纯CSS3 3D图片翻转展示

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

核心CSS代码:

澳门新浦京电子游戏 6澳门新浦京电子游戏 7

.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

澳门新浦京电子游戏 8

在线演示        源码下载

2、HTML5堆木头游戏

这款游戏的玩法是将木头堆积起来,多出的部分将被切除,直到下一根木头无法堆放为止。这款HTML5游戏的难点在于待堆放的木头是移动的,因此需要你很好的控制木头下落的位置。

澳门新浦京电子游戏 9

在线演示源码下载

漂亮的CSS3动画进度条

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

核心jQuery代码:

澳门新浦京电子游戏 10澳门新浦京电子游戏 11

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

View Code

澳门新浦京电子游戏 12

在线演示        源码下载

3、HTML5 3D立方体图片切换动画

这款HTML5动画可以将图片切分成几个立方体,带有3D的立体效果。

澳门新浦京电子游戏 13

在线演示源码下载

CSS3垂直图标菜单

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

核心CSS代码:

澳门新浦京电子游戏 14澳门新浦京电子游戏 15

#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

澳门新浦京电子游戏 16

在线演示        源码下载

4、100多个纯CSS3动画图标

这里总共有100多个纯CSS3实现的动画图标,找找看,总有一个适合你。

澳门新浦京电子游戏 17

在线演示源码下载

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

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

核心CSS代码:

澳门新浦京电子游戏 18澳门新浦京电子游戏 19

.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

澳门新浦京电子游戏 20

在线演示        源码下载

5、HTML5/CSS3动画相册

这款HTML5相册的特点是我们可以将照片随意放置在桌面上,图片可以任意倾斜,看上去很自然。

澳门新浦京电子游戏 21

在线演示源码下载

动感的CSS3 Loading文字特效

澳门新浦京电子游戏 22

在线演示        源码下载

6、HTML5 Canvas模拟衣服撕扯动画

该HTML5动画会捕获到鼠标拖拽的用力程度,从而来判断并实现衣服应该破损的程度,越用力,衣服被撕破的速度越快,赶紧来体验一下这个HTML5动画吧。

澳门新浦京电子游戏 23

在线演示源码下载

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

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

澳门新浦京电子游戏 24澳门新浦京电子游戏 25

.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

澳门新浦京电子游戏 26

在线演示        源码下载

7、jQuery/CSS3带Tooltip的滑杆动画

这是一个带有Tooltip提示框的滑杆,基于jQuery和CSS3,外观样式非常不错。

澳门新浦京电子游戏 27

在线演示源码下载

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

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

核心jQuery代码:

澳门新浦京电子游戏 28澳门新浦京电子游戏 29

$(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

澳门新浦京电子游戏 30

在线演示        源码下载


8、5个可爱的CSS3 Loading加载动画

这是一款可爱的CSS3
Loading动画,一共有5种动画类型,每组Loading动画都非常有创意。

澳门新浦京电子游戏 31

在线演示源码下载

以上8款不错的HTML5动画应用希望你会喜欢,也可以下载源码来研究。

发表评论

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