css圆弧动画_css实现圆弧渐变旋转动画

作者：黑客灵魂 | 2024-07-13 20:54:38

踩

css实现圆弧渐变旋转动画

<!doctype html>
<html>
<head>
<meta charset="utf-8"> 
 <style>
.body{
    background-color: aqua;
    height: 700px;
    width: 1000px;
   
} 
@keyframes bimg1 { 
    0% {top: 400px;} 
    50% {top:0px;transform:scale(1);opacity: 1; }   
    100% {top:0px; transform:scale(2);opacity: 0;}   
} 
@keyframes bimg2 { 
    0%  {left: 0;}
    100% {left: 400px;} 
} 
 #item {  
  animation: bimg1 7s infinite cubic-bezier(0,1,0,1),bimg2 7s infinite cubic-bezier(0,0,0,1); 
  width: 50px; 
  height: 50px; 
  position: absolute; 
  background: red; 
}
@keyframes bimg3 { 
    0% {top: 400px;} 
    50% {top:0px;transform:scale(1);opacity: 1; } 
    100% {top:0px;transform:scale(2);opacity: 0;} 
    
} 
@keyframes bimg4 { 
    0%  {left: 800px;}
    100% {left: 400px;} 
} 
 #item2 {  
  animation: bimg3 7s infinite cubic-bezier(0,1,0,1),bimg4 7s infinite cubic-bezier(0,1,0,1); 
  width: 50px; 
  height: 50px; 
  position: absolute; 
  background: yellow;

} 
 

 
 </style>
</head>
<body>
    <div class="body">
        <div id="item">
      
        </div> 
        <div id="item2">
      
        </div> 
    </div>
  
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/821511