<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#img1{width:280px;height: 279px;border-radius:140px;-webkit-animation:run 6s linear 0s infinite;}#img1:hover{-webkit-animation-play-state:paused;}@-webkit-keyframes run{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);}}</style>
</head>
<body>
<div ><img id="img1" src="C:\Users\hp\Desktop\1.jpg" /></div>
</body>
</html>
1.id為img1的圖片通過設置圓角使圖片為圓形顯示，src為路徑
- 代碼中關鍵的部分是怎樣使得圖片無限轉動。 我們可以使用 -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: 動畫執行方向。 - @-webkit-keyframes 中的from和to 兩個屬性，就是指定動畫執行的初始值和結束值。
- -webkit-animation-play-state:paused; 暫停動畫的執行。