代码：　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>

...

相关文章