当前位置:首页 > 前端 > HTML/CSS

纯Css3+html5实现旋转缩放大小

先来看下效果:
鼠标滑过这里

代码如下(不支持IE6、IE7、IE8等版本的浏览器,其它浏览器均支持)



<p>
<strong></strong>
</p>
<pre><style>#divRotate{
width:90px;
height:90px;
margin:30px auto;
background: #f6f6f6;
border:1px dashed #09c;
font-size:12px;
line-height:90px;
text-align:center;
color:#666;
-webkit-transition:all 0.8s ease-out; /*0.8s:定义动画的时间 ease-out:定义动画的方式(ease-in或者ease-out) all:定义整体运动的对象*/
}
#divRotate:hover{
-webkit-transform:scale(1.3) rotate(360deg); /*scale:旋转至大小,1.0为原始比例  rotate:旋转的度数*/
}</style>
<div id="divRotate" title="我会被旋转">鼠标滑过这里</div></pre>
<br />

读后有收获可以支付宝请作者喝咖啡
< 上一篇 下一篇 >
文章评论
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部