利用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 }
可直接套用看效果哦