代码： CSS3动画，简单示例（鼠标移上去后，背景图片旋转）

代码：　CSS3动画，简单示例（鼠标移上去后，背景图片旋转）

 

<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>

 

...

posted on 2016-06-01 16:59 bjhhh 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/qq21270/p/5550236.html