首页
-
代码
2014-02-10 10:33:43 -0500
★CSS3圆形块鼠标悬浮/点触360度旋转特效★
请勿抄袭本页面
代码说明
一款基于HTML5的CSS3特效，让div标签360度旋转，在鼠标悬停时旋转动作被激发，代码简洁，动画效果超好。转自源码爱好者
html代码
<style> .xuan{ transition:all 0.4s ease-in-out; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; /*属性变化时间快慢，这里特指div块的旋转速度快慢*/ width:200px; height:200px; background-color:#000000; display:inline-block; color:yellow; text-align:center; line-height:200px; font-size:20px; border:2px solid grey; border-radius:200px; outline:3px solid grey; } .xuan:hover { transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); /*鼠标悬浮时，div块发生360度旋转*/ } </style> <div class="xuan">360度旋转</div>
代码演示
360度旋转
移动鼠标悬浮(电脑)或点一下(触屏机)旋转
[代码仅供参考，转载请注明出处]
----Comments(1)----
幻龙 (@fhl)
|
@
at 2014-02-10 11:29:
不错，顶一下
Comment:
Name:
Subscribe
|
Register
|
Login
|
N
