這篇文章主要介紹了純HTML5 CSS3製作圖片旋轉，HTML5結合CSS3 實現的一些動畫特效，實現起來比較容易，感興趣的小伙伴們可以參考一下
此實例可以應用到許多專案中，很實用，希望大家可以掌握。
效果圖如下：
這個效果實現起來其實並不困難，程式碼清單如下:
##XML/HTML Code複製內容到剪貼簿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#liu{
width:280px;
height: 279px;
background: url(shishi.png) no-repeat;
border-radius:140px;
-webkit-animation:run 6s linear 0s infinite;
}
#liu:hover{
-webkit-animation-play-state:paused;
}
@-webkit-keyframes run{
from{
-webkit-transform:rotate(0deg);
}
to{
-webkit-transform:rotate(360deg);
}
}
</style>
</head>
<body>
<p id="liu"></p>
</body>
</html>2. 程式碼中關鍵的部分是怎樣使得圖片無限轉動。我們可以使用 -webkit-animation 和 @-webkit-keyframes 組合使用來完成。
#name: 是@-webkit-keyframes 中需要指定的方法，用來執行動畫。
duration: 動畫一個週期執行的長度。
timing-function: 動畫執行的效果，可以是線性的，也可以是"快速進入慢速出來"等。
delay: 動畫延時執行的時長。
iteration_count: 動畫迴圈執行次數，如果是infinite，則無限執行。
direction: 動畫執行方向。
3. @-webkit-keyframes 中的from和to 兩個屬性，就是指定動畫執行的初始值和結束值。
4. -webkit-animation-play-state:paused; 暫停動畫的執行。
以上就是本文的全部內容，希望對大家實現圖片旋轉特效有所幫助。
相關推薦：
以上是純HTML5+CSS3製作圖片旋轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！
