惊艳的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:;
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);
}
});
惊艳的HTML5动画特效及源码的更多相关文章
- 8款HTML5动画特效推荐源码
1.HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢.今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动 ...
- 分享10款效果惊艳的HTML5图片特效
在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家. 1.HTML5 3D正方体旋转动画 很酷的3D特 ...
- 难得一见的HTML5动画欣赏及源码下载
今天要给大家分享一些很酷的HTML5动画演示,并且提供源代码的下载.大部分HTML5动画都是通过canvas实现,当然也有基于SVG的,尤其是第一个,看起来很简单,但是创意却不错. 1.HTML5梦幻 ...
- 分享10款效果惊艳的HTML5图片特效【转】
先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: ...
- 精妙无比 8款HTML5动画实例及源码
1.jQuery垂直带小图标菜单导航插件 今天我们要来分享一款jQuery菜单插件,这款jQuery菜单是垂直的样式,鼠标滑过菜单项时会出现一个背景,菜单项的右侧也会出现一个小箭头.另外值得注意的是, ...
- 绝对震撼 7款HTML5动画应用及源码
1.HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要来推荐一款HTML5 Canvas动画,是一个模拟衣服撕扯动画,效果非常逼真.刚开始衣服挂在绳子上,用鼠标拖拽衣服即可让衣服摆动起来,当 ...
- 8款强大的CSS3/HTML5动画及应用源码
1.CSS3 jQuery UI控制滑杆插件 今天我们要来分享一款基于CSS3和jQuery UI的控制滑杆插件,这款控制滑杆是在HTML5滑杆元素的基础上进行自定义CSS3渲染,所以外观更加漂亮.另 ...
- android组件化方案、二维码扫码、Kotlin新闻客户端、动画特效等源码
Android精选源码 CalendarView日历选择器 android下拉刷新动画效果代码 一个非常方便的fragment页面框架 android组件化方案源码 Zxing实现二维码条形码的扫描和 ...
- ( 转 )超级惊艳 10款HTML5动画特效推荐
今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些HTML5动画和jQu ...
随机推荐
- ostream_iterator的可能实现
当我们要输出一个容器的内容时,可以使用std::copy函数,如下: vector <string> myvector; std::copy(myvector.begin(), myvec ...
- Android.mk高级写法
转:http://blog.csdn.net/langresser_king/article/details/8275291 原本只是想记录一些常用的使用技巧,但是越写越得意(>_<),忍 ...
- win7 LR11.0 启动controller报：Failed to create Online：无效指针
win7 LR11.0 启动controller报:Failed to create Online:无效指针 运行lr setup.exe 进行修复后问题解决 修复完成后,覆盖lr安装目录“bin”文 ...
- matplotlib-plot-style
style 1.绘制x=1 2.不同线宽 enumerate(Widths) 3.线型(实线,虚线,点划线) linestyle set_dashes 4.自动设置线颜色 5.点的显示形式 marke ...
- <邱永汉股票入门>读书笔记
书在这里 在踏入股票市场以前,首先必须具备的观念就是“我能够亏损的极限是多少”?而不仅仅是我该准备多少钱 任何投资都要具备智慧性的忍耐力 基本分析注重的是公司营运业绩的报告与企业体质的解释:技术分析则 ...
- 【转】一篇文章读懂人力资源三支柱体系（COE・BP・SSC）
通过人力资源转型,提升效率和效能 作者:Sharon Li,翰威特大中华区咨询总监. 杰克韦尔奇曾说过“人力资源负责人在任何企业中都应该是第二号人物”,但在中国,99%的企业都做不到.原因很简单, ...
- 小米手机刷机工具MiFlash怎么用
刷机包的获取:直接登陆MIUI系统官网(miui.com),在其“下载”栏目中根据手机类型找到对应的刷机包进行下载. 接下来就需要下载“小米手机刷机工具MiFlash”程序,可以直接从以下地址中获 ...
- 使用JS和JQuery 阻止表单提交的两种方法
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- android尺子的自定义view——RulerView
项目中用到自定义尺子的样式: 原代码在github上找的,地址:https://github.com/QQabby/HorizontalRuler 原效果为 因为跟自己要使用的view稍有不同 所以 ...
- js实例属性和原型属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...