CSS动画

2021-05-16 17:34:07 阅读：145 来源： 互联网

标签：动画 solid 88deg transform 1px rotate3d border 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 }

可直接套用看效果哦

标签：动画,solid,88deg,transform,1px,rotate3d,border,CSS
来源： https://www.cnblogs.com/linboomboom/p/14774250.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS动画