如题,纯css3实现的三个旋转的环,每个环利用一条边比另外三条边粗的特性,做出下面的效果,下面是详细代码:
1、html
1 | < div class = "bg" > |
2 | < div class = "wrap" > |
3 | < ul class = "circle" > |
4 | < li >< span ></ span ></ li > |
5 | < li >< span ></ span ></ li > |
6 | < li >< span ></ span ></ li > |
7 | </ ul > |
8 | </ div > |
9 | </ div > |
2、css
01 | ul,ol,li{ |
02 | margin : 0 ; |
03 | padding : 0 ; |
04 | list-style : none ; |
05 | } |
06 | .wrap { |
07 | display : block ; |
08 | list-style : none ; |
09 | width : 500px ; |
10 | height : 500px ; |
11 | margin : 0 auto ; |
12 | border-radius: 50% ; |
13 | transform: rotateX( 75 deg) rotateY( -15 deg) rotateZ( 15 deg); |
14 | position : relative ; |
15 | transform-style: preserve -3 d; |
16 | z-index : 1 ; |
17 | transition: width . 3 s, height . 3 s; |
18 | } |
19 | @keyframes rotateY { |
20 | from { |
21 | transform: rotateY( 0 deg); |
22 | } |
23 | to { |
24 | transform: rotateY( 360 deg); |
25 | } |
26 | } |
27 | .wrap . circle { |
28 | width : 100% ; |
29 | height : 100% ; |
30 | transform-style: preserve -3 d; |
31 | animation: rotateY 18 s linear infinite; |
32 | } |
33 | . circle li { |
34 | width : 100% ; |
35 | height : 100% ; |
36 | position : absolute ; |
37 | top : 0 ; |
38 | left : 0 ; |
39 | z-index : 1 ; |
40 | border-radius: 50% ; |
41 | border : 5px solid #4BBAF2 ; |
42 | background-color : transparent ; |
43 | box-sizing: border-box; |
44 | } |
45 | . circle li:nth-child( 1 ) { |
46 | transform: rotateX( 0 deg) rotateY( 60 deg) rotateZ( 0 deg); |
47 | } |
48 | . circle li:nth-child( 2 ) { |
49 | transform: rotateX( 0 deg) rotateY( 120 deg) rotateZ( 0 deg); |
50 | } |
51 | . circle li:nth-child( 3 ) { |
52 | transform: rotateX( 0 deg) rotateY( 180 deg) rotateZ( 0 deg); |
53 | } |
54 | . circle li span { |
55 | display : block ; |
56 | width : 100% ; |
57 | height : 100% ; |
58 | border-radius: 50% ; |
59 | border : 5px solid ; |
60 | border-color : rgba( 0 , 82 , 217 , 1 ) rgba( 0 , 82 , 217 , . 4 ) rgba( 0 , 82 , 217 , . 3 ) rgba( 255 , 255 , 255 , . 2 ); |
61 | box-sizing: border-box; |
62 | animation: rotate 3 s linear infinite; |
63 | } |
64 | . circle li:nth-child( 2 ) span { |
65 | animation-delay: 1 s; |
66 | } |
67 | . circle li:nth-child( 2 ) span { |
68 | animation-delay: 2 s; |
69 | } |