css3旋转的大风车动画特效
http://www.oschina.net/code/snippet_2671046_55494
css文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
Java代码 @charset "utf-8"; .loading{background:url(http://hovertree.com/texiao/css3/9/images/fcbg.png);width:320px;height:500px;margin:auto;position:relative;margin-top:200px;z-index:2} .pic{ background:url(http://hovertree.com/texiao/css3/9/images/fc.png);position:absolute;z-index:1;right:60px;width:427px;height:430px;top:-170px; -webkit-animation:load 2s linear 1s infinite; -moz-animation:load 2s linear 1s infinite; -ms-animation:load 2s linear 1s infinite; -o-animation:load 2s linear 1s infinite; animation:load 2s linear 1s infinite; } .fcc{background:url(http://hovertree.com/texiao/css3/9/images/fcc.png);position:absolute;z-index:3;right:230px;width:90px;height:97px;top:0} @-webkit-keyframes load{ 0%{ transform: rotate(0); -ms-transform: rotate(0); /* IE 9 */ -webkit-transform: rotate(0); /* Safari and Chrome */ -o-transform: rotate(0); /* Opera */ -moz-transform: rotate(0); /* Firefox */ } 100%{ transform: rotate(360deg); -ms-transform: rotate(360deg); /* IE 9 */ -webkit-transform: rotate(360deg); /* Safari and Chrome */ -o-transform: rotate(360deg); /* Opera */ -moz-transform: rotate(360deg); /* Firefox */ } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Html代码 <!DOCTYPE html> <html> <head> <!-- 效果：http://hovertree.com/texiao/css3/9/ --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3转动的大风车 - 何问起</title><base target="_blank" /> <link href="http://hovertree.com/texiao/css3/9/hovertreefc/hovertreedfc.css" rel="stylesheet" type="text/css" /> <style>a{color:blue;}</style> </head> <body> <div class="loading"> <div class="pic"></div> <div class="fcc"></div> </div> <div><a href="http://hovertree.com/h/bjaf/h9tb5itb.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a></div> </body> </html> |
