那些不错的Html5+CSS3+Canvas效果！_H5之家 - 中国HTML5教程资源分享第一站

那些不错的Html5+CSS3+Canvas效果！

作者：李维发布日期：2014-07-21 20:31:38

我要投稿

Css3 模拟支付宝AA收款动画 [摘抄]

demo地址：

1 <html> 2 <head> 3 <title></title> 4 <style type='text/css'> 5 .circle{width:200px;height:200px;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;} 6 .circle1, .circle2, .circle3, .circle4, .circle5, .circle6, .center{ 7 position:absolute; 8 left:50%; 9 top:50%; 10 margin:-30px 0 0 -30px; 11 width:60px; 12 height:60px; 13 border-radius:30px; 14 background-color:#666666; 15 } 16 .center{ 17 position:absolute; 18 left:50%; 19 top:50%; 20 margin:-35px 0 0 -35px; 21 width:70px; 22 height:70px; 23 border-radius:35px; 24 background:#111111; 25 text-align:center; 26 line-height:70px; 27 color:#EAEAEA; 28 font-size:16px; 29 font-family:'FAE8F6F96C59ED1'; 30 } 31 .circle1{ 32 -webkit-animation:circle 3s linear infinite; 33 animation:circle 3s linear infinite; 34 } 35 .circle2{ 36 -webkit-animation:circle 3s linear 0.8s infinite; 37 animation:circle 3s linear 0.8s infinite; 38 } 39 .circle3{ 40 -webkit-animation:circle 3s linear 1.6s infinite; 41 animation:circle 3s linear 1.6s infinite; 42 } 43 @-webkit-keyframes circle{ 44 from{ 45 opacity:1; 46 -webkit-transform:scale(0); 47 } 48 to{ 49 opacity:0; 50 -webkit-transform:scale(3); 51 } 52 } 53 </style> 54 </head> 55 <body> 56 <div class='circle'> 57 <div class='circle1'> </div> 58 <div class='circle2'> </div> 59 <div class='circle3'> </div> 60 <div class='center'>AA</div> 61 </div> 62 </body> 63 </html>

模糊，毛玻璃效果（Css3 Filter）:

地址：

#player {-webkit-filter: blur(3px);-moz-filter: blur(3px);-ms-filter: blur(3px);-o-filter: blur(3px);}

图片自动360旋转效果：

.img { animation: 10s linear 0s normal none infinite rotate; animation-play-state: running; }　　图片,平滑的转动360度效果： img:hover { transform: rotate(360deg); transition: all 0.5s ease 0s; }

CSS3倒计时效果：

<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <meta name='author' content='' /> <meta name='keywords' content='' /> <meta name='description' content='' /> <title> new document </title> <style> div{position:absolute;width:200px;height:200px;left:0;top:0;right:0;bottom:0;margin:auto;border-radius:50%;background-color:#CCC;} div:before, div:after{position:absolute;content:'';width:50%;height:100%;top:0;left:0;background-color:#CCC;border-radius:100% 0 0 100%/50% 0 0 50%;z-index:1;transform-origin:100% 50%;-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-o-transform-origin:100% 50%;} div.half, div:before{background-color:gold;} div{animation:run 10s steps(1,end);-webkit-animation:run 10s steps(1,end);-moz-animation:run 10s steps(1,end);-o-animation:run 10s steps(1,end);} div:before{animation:run1 10s linear;-webkit-animation:run1 10s linear;-moz-animation:run1 10s linear;-o-animation:run1 10s linear;} div span{position:absolute;width:100%;height:22px;left:0;top:90px;font-size:20px;font-weight:bold;line-height:22px;text-align:center;z-index:5;} @keyframes run{ 50%, 100%{background-color:gold;} } @keyframes run1{ 100%{z-index:3;transform:rotate(360deg);} } @-webkit-keyframes run{ 50%, 100%{background-color:gold;} } @-webkit-keyframes run1{ 100%{z-index:2;-webkit-transform:rotate(360deg);} } </style> </head> <body> <div> <span>0</span> </div> <script> var div=document.querySelector('div'),span=div.querySelector('span'),step=0,timer, aniStart=function(e){ if(e.animationName=='run') { (function(){ span.innerHTML=step++; timer=setTimeout(arguments.callee,1000); })(); } },aniEnd=function(e){ if(e.animationName=='run') { span.innerHTML=10; clearTimeout(timer); step=0; } }; div.addEventListener('animationstart',aniStart,false); div.addEventListener('animationend',aniEnd,false); div.addEventListener('webkitAnimationStart',aniStart,false); div.addEventListener('webkitAnimationEnd',aniEnd,false); div.addEventListener('oAnimationEnd',aniEnd,false); div.addEventListener('oAnimationEnd',aniEnd,false); </script> </body> </html>

闪闪的效果：