此執行個體可以應用到許多項目中，很實用，希望大家可以掌握。
如下：
這個效果實現起來其實並不困難，代碼清單如下:
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>
1. id為liu的p就是用來展示圖片的地區，只不過這裡的圖片是使用的背景圖片，並且通過設定圓角來達到圓形的效果。
2. 代碼中關鍵的部分是怎樣使得圖片無限轉動。 我們可以使用 -webkit-animation 和 @-webkit-keyframes 組合使用來完成。
-webkit-animation 是一個複合屬性，定義如下：
-webkit-animation: name duration timing-function delay iteration_count direction;
name: 是 @-webkit-keyframes 中需要指定的方法，用來執行動畫。
duration: 動畫一個周期執行的時間長度。
timing-function: 動畫執行的效果，可以是線性，也可以是"快速進入慢速出來"等。
delay: 動畫延時執行的時間長度。
iteration_count: 動畫迴圈執行次數，如果是infinite，則無限執行。
direction: 動畫執行方向。
3. @-webkit-keyframes 中的from和to 兩個屬性，就是指定動畫執行的初始值和結束值。
4. -webkit-animation-play-state:paused; 暫停動畫的執行。
以上就是本文的全部內容，希望對大家實現圖片旋轉特效有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
