利用CSS内的animation: 秒数 infinite name(与@keyframes属性的name相同）， 以及 transform: rotate3d（x,y,z,角度deg）进行简单的动画
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="../Css/register.css"/> 7 </head> 8 9 <body style="margin: 0;padding: 0;"> 10 <div id="trans-test"> 11 <div class="groundone"> 12 13 </div> 14 <div class="groundtwo"> 15 16 </div> 17 <div class="groundthr"> 18 19 </div> 20 </div> 21 </body> 22 </html>
以下是CSS代码
1 .groundone{
2 width: 200px;
3 height: 200px;
4 border-radius: 50%;
5 border: red 1px solid;
6 position: absolute;
7 margin-left: 0px;
8 transform: rotate3d(0,1,0,88deg);
9 animation: 2s infinite oneg ;
10 }
11 .groundtwo{
12 width: 200px;
13 height: 200px;
14 border-radius: 50%;
15 border: green 1px solid;
16 /* transform: rotateY(88deg) */
17 transform: rotate3d(1,1,0,88deg);
18 animation: 1s infinite twog ;
19 }
20 .groundthr{
21 width: 200px;
22 height: 200px;
23 border-radius: 50%;
24 border: blue 1px solid;
25 transform: rotate3d(-1,1,0,88deg);
26 margin-top: -200px;
27 animation: 3s infinite thrg ;
28 }
29
30 #trans-test{
31 width: 500px;
32 height: 400px;
33 margin: 100px auto;
34 }
35
36 @keyframes oneg{
37 0%{
38 transform: rotate3d(1,1,0,88deg);
39 }
40 33.33%{
41 transform: rotate3d(-1,1,0,-88deg);
42 border: gold 1px solid;
43 }
44 66.66%{
45 transform: rotate3d(0,1,0,188deg);
46 border: black 1px solid;
47 }
48 100%{
49 transform: rotate3d(1,1,0,88deg);
50 }
51 }
52
53 @keyframes twog{
54 0%{
55 transform: rotate3d(0,1,0,88deg);
56 }
57 33.33%{
58 transform: rotate3d(-1,1,0,-88deg);
59 border: deeppink 1px solid;
60 }
61 66.66%{
62 transform: rotate3d(1,1,0,188deg);
63 border: darkslateblue 1px solid;
64 }
65 100%{
66 transform: rotate3d(0,1,0,88deg);
67 }
68 }
69
70 @keyframes thrg{
71 0%{
72 transform: rotate3d(-1,1,0,88deg);
73 }
74 33.33%{
75 transform: rotate3d(1,1,0,88deg);
76 border: deepskyblue 1px solid;
77 }
78 66.66%{
79 transform: rotate3d(0,1,0,188deg);
80 border: mediumspringgreen 1px solid;
81 }
82 100%{
83 transform: rotate3d(-1,1,0,88deg);
84 }
85 }
可直接套用看效果哦