首页 > 代码库 > 惊艳的HTML5动画特效及源码

惊艳的HTML5动画特效及源码

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

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

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

核心CSS代码:

.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

html5-css3-windmill

在线演示        源码下载

纯CSS3 3D图片翻转展示

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

核心CSS代码:

.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

css3-3d-image-coverflow

在线演示        源码下载

漂亮的CSS3动画进度条

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

核心jQuery代码:

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

css3-skill-progress-bar

在线演示        源码下载

CSS3垂直图标菜单

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

核心CSS代码:

#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

css3-ver-nav-with-icon

在线演示        源码下载

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

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

核心CSS代码:

.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

css3-icon-animation-button

在线演示        源码下载

动感的CSS3 Loading文字特效

css3-loading-text-animation

在线演示        源码下载

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

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

.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

css3-stick-switch

在线演示        源码下载

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

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

核心jQuery代码:

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

css3-animated-progress-bar

在线演示        源码下载

惊艳的HTML5动画特效及源码