css3实现div自动左右动 

 1 <!DOCTYPE html>
 2 <meta charset="UTF-8"/>
 3 <html>
 4 
 5     <head>
 6         <style>
 7             div {
 8                 width: 100px;
 9                 height: 100px;
10                 background: red;
11                 position: relative;
12                 animation: myfirst 5s infinite alternate;
13             }
14             
15             @keyframes myfirst {
16                 0% {
17                     background: red;
18                     left: 0px;
19                     top: 0px;
20                 }
21             
22                 100% {
23                     background: blue;
24                     left: 200px;
25                     top: 0px;
26                 }
27                 
28             }
29             //鼠标划过停止动画效果
30             div:hover{
31                  -webkit-animation-play-state:paused;
32                  animation-play-state:paused;
33             }
34         </style>
35     </head>
36     <body>
37         <div></div>
38     </body>
39 
40 </html>

 

posted @ 2019-10-28 12:47  YH丶浩  阅读(1042)  评论(0)    收藏  举报