Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /www/wwwroot/s5s5.me/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
最近研究CSS3的动画,还是相当的强大啊,做了一个小皮球跳跳的动画 DEMO,代码如下:
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | < !doctype html> <html> <head> <meta charset="utf-8" /> <title>css3 animation</title> <style> .animation { -webkit-animation-name: bounce; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 10; -webkit-animation-direction: alternate; -webkit-border-radius:100px; position: relative; left: 0; top:100px; width:100px; height:100px; text-align:center; line-height:100px; background:#F00; } @-webkit-keyframes bounce { from { top: 0; -webkit-animation-timing-function: ease-out; } 25% { top: 110px; -webkit-animation-timing-function: ease-out; } 50% { top: 50px; -webkit-animation-timing-function: ease-out; } 75% { top: 90px; -webkit-animation-timing-function: ease-out; } to { top: 100px; } } </style> </head> <body> <div class="animation">皮球</div> </body> </html> |
参考文档:
CSS Animation
Safari CSS Reference
CSS Animations Module Level 3
你需要知道的CSS3 动画技术
CSS3变换入门
CSS3 鼠标悬停动画
就是有点卡,好像效率不高。
图像很有爱~`
请问下,哪里有学CSS3动画的教程可以参考?
就在文章最下面的参考资料就是啦~
火狐竟然不支持,看来没什么实际的用处
谢谢提供,回去试验一样
谢谢楼主提供这么好的东西,支持一下