代码: CSS3动画,简单示例(鼠标移上去后,背景图片旋转)

时间:2024-01-12 08:03:44
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
.trans-rotate{
-webkit-transition: transform .25s linear;
-moz-transition: transform .25s linear;
-o-transition: transform .25s linear;
transition: transform .25s linear;
}/* 加上这个样式后,才会在0.25秒内旋转完毕。否则只会显示立刻旋转完的结果 */ .bbox{position:relative;width:109px;height:109px;} /*总容器*/
.bbox .btnbg{position:absolute;left:0;top:0;width:97px;height:97px;border:6px solid #edf0f3;border-radius:50%;background:url('images/btnbg.png');z-index:2;}/*97x97 背景图片*/
.bbox:hover .btnbg{transform:rotate(480deg);} /* 鼠标移上去后,旋转*/
.bbox .btntxt{position:absolute;left:30px;top:25px;width:48px;height:48px;color:#fff;font-size:24px;line-height:30px;cursor:pointer;-webkit-user-select:none;font-family:'微软雅黑';z-index:3;}
</style>
<div class="bbox">
<div class="btnbg trans-rotate"></div>
<div class="btntxt">开始计算</div>
</div>

...