今天我们要来分享一些很酷的HTML5动画演示，HTML5的强大之处在于它可以利用canvas的特性来绘制很多普通网页无法完成的图形和动画，canvas就像一块超级画板，在上面不仅可以实现平面图形，而且一些3D动画也非常简单。很多HTML5动画也都基于canvas，一起来看看吧。
HTML5/CSS3实现大风车旋转动画
作为今天首款HTML5动画，这款大风车旋转效果的确非常棒，它是用纯CSS3实现。
核心CSS代码：
-webkit-transform: scale(.6);
position:absolute;
top:<span style="color: #px;
left:<span style="color: #px;
perspective: 1000px;
width: 350px;
height: 350px;
left: 10%;
z-index:2;
border-radius: 50%;
position: absolute;
margin-top: -30px;
margin-left: 50px;
animation: spin 6s linear infinite;
background: white;
position:absolute;
width:41px;
height:<span style="color: #px;
top:-10px;
left:<span style="color: #px;
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
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background:white;
position:absolute;
width:41px;
height:<span style="color: #px;
top:<span style="color: #px;
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
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background:white;
position:absolute;
width:41px;
height:<span style="color: #px;
top:<span style="color: #px;
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
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background:white;
position:absolute;
width:41px;
height:<span style="color: #px;
bottom:-10px;
left:<span style="color: #px;
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
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
width:1px;
height:<span style="color: #px;
left:<span style="color: #px;
background:white;
position:absolute;
transform:rotate(90deg);
width:1px;
height:<span style="color: #px;
left:<span style="color: #px;
background:white;
position:absolute;
transform:rotate(180deg);
.base .bottom_base{
position:absolute;
width:90px;
height:<span style="color: #px;
left:<span style="color: #px;
border-right: 16px solid transparent;
border-left: 16px solid transparent;
border-bottom: 380px solid white;
opacity:.8;
z-index:-1;
top:<span style="color: #px;
position:absolute;
top:<span style="color: #px;
left:-30px;
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;
left:50px;
li:nth-child(3){
position:absolute;
left:50px;
@keyframes spin {
transform:rotate(0deg);
transform:rotate(-360deg);
纯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;
漂亮的CSS3动画进度条
这是一款闪闪发光的CSS3进度条，进度条在初始化的时候还有滑动的动画特效。
核心jQuery代码：
(function() {
$(document).ready(function() {
return $(".bar").each(function(i, elem) {
return $(elem).addClass('active');
}).call(this);
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);
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);
color: #bed1df;
margin: 25%;
font-family: 'Open Sans', sans-serif;
font-size: 0.8em;
color: #bed1df;
margin: 50px;
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
display: block;
z-index: 1;
left: -9px;
top: 15px;
.level-two li {
margin: 15px;
.level-one:hover & .level-two {
display: block;
.level-two {
left: 130%;
纯CSS3背景渐变按钮 按钮图标淡入淡出动画
这是一组带有动画效果的按钮，鼠标滑过按钮时将出现背景渐变的动画特效。
核心CSS代码：
width:<span style="color: #px;
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:<span style="color: # 3px #999;
border-radius:3px;
transition:1s all ease;
-webkit-transition:<span style="color: #s all ease;
-moz-transition:<span style="color: #s all ease;
-ms-transition:<span style="color: #s all ease;
-o-transition:<span style="color: #s all ease;
overflow:hidden;
.test .aLink{
display:block;
width:<span style="color: #px;
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:<span style="color: #px 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;
opacity:0;
-webkit-transition:<span style="color: #s all ease;
-moz-transition:<span style="color: #s all ease;
-ms-transition:<span style="color: #s all ease;
-o-transition:<span style="color: #s all ease;
transition:<span style="color: #s all ease;
.test .aLink .img{
position:absolute;
width:70px;
height:70px;
display:block;
z-index:2;
left:10px;
-webkit-transition:<span style="color: #s all ease;
-moz-transition:<span style="color: #s all ease;
-ms-transition:<span style="color: #s all ease;
-o-transition:<span style="color: #s all ease;
transition:<span style="color: #s all ease;
.test .aLink .txt2{
font-size:32px;
color:#FFF;
width:<span style="color: #px;
overflow:hidden;
display:block;
text-shadow:<span style="color: # 2px #999999;
position:absolute;
left:80px;
text-align:center;
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;
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:<span style="color: #s all ease;
-moz-transition:<span style="color: #s all ease;
-ms-transition:<span style="color: #s all ease;
-o-transition:<span style="color: #s all ease;
.test:hover{
box-shadow:<span style="color: # 10px #666;
box-shadow:<span style="color: # 10px #666;
.test:hover .img{
width:<span style="color: #px;
height:<span style="color: #px;
left:-26px;
top:-30px;
opacity:0;
.test:hover .txt{
opacity:1;
.test:active{
box-shadow:<span style="color: # 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%;
动感的CSS3 Loading文字特效
纯CSS3实现滑杆开关切换按钮动画
很不错的自定义radiobox效果，非常有创意
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;
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;
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;
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;
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;
height: 0;
position: absolute;
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;
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);
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);
阅读(...) 评论()