1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 /* 定义动画 */ 8 @keyframes exma{ 9 from{ 10 width: 100px; 11 } 12 13 to{ 14 width: 500px; 15 } 16 } 17 .box{ 18 width: 100px; 19 height: 100px; 20 background-color: gold; 21 animation: exma 1s ease infinite alternate; 22 } 23 24 .box:hover{ 25 animation-play-state: paused; 26 /* 鼠标放上去时静止，可以在.box中设置这个属性，然后将这里的属性值改成running，这样变成鼠标放上去才动*/ 27 } 28 </style> 29 </head> 30 <body> 31 <div class="box"></div> 32 </body> 33 </html>