【css】網頁動畫效果

1.表徵圖旋轉的效果

html代碼：

 <div class="apply-entrance ">               <p class="apply-tt ">我要講課<i class="icon-font i-v-bottom-small "></i></p>               <ul class="apply-link-list">               <li>               <a href="#" title="教育機構開課" target="_blank">教育機構開課</a>               </li>               <li>               <a href="#" title="個人老師開課" target="_blank">個人老師開課</a>               </li>               </ul>             </div>

css代碼：

注意：transition 與transform的配套使用即可

ps:設定i標籤的display，此旋轉才生效。

.apply-entrance .apply-tt i {display: inline-block;margin-left: 2px;transition: transform .3s;}.apply-entrance:hover .apply-tt i{transform: rotate(180deg);} 

2.