其他分享
首页 > 其他分享> > css3实现div自动左右动

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>

 

标签:css3,100px,paused,animation,自动,background,div,0px
来源: https://www.cnblogs.com/520yh/p/11751576.html