今天我们要来分享一些很酷的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:;
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);
}
}
在线演示 源码下载
纯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:;
}
.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:;
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:;
}
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);
}
li {
color: #bed1df;
margin:;
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:;
z-index:;
left: -9px;
top: 15px;
}
.level-two li {
margin: 15px;
}
.level-one:hover > .level-two {
display: block;
}
.level-two {
left: 130%;
top:;
}
在线演示 源码下载
纯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:;
-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:;
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:;
top:;
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:;
}
.test:hover .txt{
opacity:;
}
.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%;
}
在线演示 源码下载
动感的CSS3 Loading文字特效
在线演示 源码下载
纯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:;
padding:;
display: block;
position: absolute;
top:;
left:;
z-index:;
}
.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:;
left:;
z-index:;
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:;
z-index:;
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:;
left:;
z-index:;
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:;
position: absolute;
top: 6.6em;
z-index:;
border-bottom: 4.5em solid #111;
border-left: 0.7em solid transparent;
border-right: 0.7em solid transparent;
border-radius:;
}
.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:;
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:;
}
.switch-handle-top {
width: 5em;
height: 5em;
position: absolute;
top: 8.5em;
left: 0.8em;
z-index:;
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:;
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:;
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:;
height:;
position: absolute;
top:;
left:;
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:;
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:;
border-top: 4.5em solid #111;
}
.switch input:checked~.switch-handle {
top: 1.5em;
}
.switch input:checked~.switch-handle-top {
top: -1em;
border-top:;
border-bottom: 0.2em solid #AEB2B3;
}
.switch input:checked~.switch-handle-bottom {
top: 4.2em;
border-top:;
border-bottom: 0.2em solid #141414;
}
.switch input:checked~.switch-handle-base {
top: 4.5em;
border-top:;
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);
}
});
在线演示 源码下载
