CSS动画

2021/5/16 18:29:58

编程Tag： 动画 css transform border Solid 88deg 1px rotate3d

本文主要是介绍CSS动画，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

利用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 }

可直接套用看效果哦

这篇关于CSS动画的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS动画

相关编程文章