我們可以透過css來做動畫效果,下面我為大家示範的是p的旋轉,顏色過渡的動畫
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title></title> <style> a{ text-align:center; line-height:100px; transition:all 2s; width:100px; height:100px; background:pink; float:left; border-radius:50%; } a:hover{ transition:all 2s; background:red; transform-origin:50 100; transform:rotate(360deg); border-radius:50%; } </style> </head> <body> <h1>请将鼠标移动到下面的矩形上:</h1> <a> 两秒旋转360 </a> </body> </html>
效果自己測試,很絢麗哦!
以上這篇關於css旋轉動畫效果的簡單實現就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持PHP中文網。
更多css旋轉動畫效果的簡單實作範例詳解相關文章請關注PHP中文網!