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>
