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

 

...