CSS3实现的圆形旋转变大动画效果:
本章节分享一段使用CSS3实现的动画效果。
当鼠标悬浮于圆形图案之上的时候,会出现旋转变大的动画效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font-size:14px; color:#333; font-family:"Microsoft Yahei"; } #box{ margin:-100px 0 0 -100px; top:50%; left:50%; width:200px; height:200px; line-height:200px; text-align:center; border:5px #d1d1d1 solid; border-radius:105px; box-shadow:0 0 20px #666; background:#eee; overflow:hidden; position:absolute; /*动画部分 开始*/ -webkit-transition: margin 1s linear, width 1s linear, height 1s linear, font-size 1s linear, line-height 1s linear, color 1s linear, border 1s linear, border-radius 1s linear, background 1s linear, box-shadow 1s linear, -webkit-transform 1s linear; -moz-transition: margin 1s linear, width 1s linear, height 1s linear, font-size 1s linear, line-height 1s linear, color 1s linear, border 1s linear, border-radius 1s linear, background 1s linear, box-shadow 1s linear, -moz-transform 1s linear; -o-transition: margin 1s linear, width 1s linear, height 1s linear, font-size 1s linear, line-height 1s linear, color 1s linear, border 1s linear, border-radius 1s linear, background 1s linear, box-shadow 1s linear, -o-transform 1s linear;/*动画部分 结束*/ } #box:hover{ margin:-200px 0 0 -200px; width:400px; height:400px; font-size:26px; line-height:400px; color:#fff; border:5px #fff solid; border-radius:210px; background:#05a; box-shadow:0 0 40px #900; -webkit-transform:rotate(720deg); -moz-transform:rotate(720deg); -o-transform:rotate(720deg); } </style> </head> <body> <div id="box">softwhy.com</div> </body> </html>
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=17056
更多内容可以参阅:http://www.softwhy.com/divcss/