首页 > 建站教程 > CSS3+HTML5 >  css3实现三个旋转的环正文

css3实现三个旋转的环

css3实现的三个旋转的环

如题,纯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

01ul,ol,li{
02margin0;
03padding0;
04list-stylenone;
05}
06.wrap {
07    displayblock;
08    list-stylenone;
09    width500px;
10    height500px;
11    margin0 auto;
12    border-radius: 50%;
13    transform: rotateX(75deg) rotateY(-15deg) rotateZ(15deg);
14    positionrelative;
15    transform-style: preserve-3d;
16    z-index1;
17    transition: width .3s, height .3s;
18}
19@keyframes rotateY {
20    from {
21        transform: rotateY(0deg);
22    }
23    to {
24        transform: rotateY(360deg);
25    }
26}
27.wrap .circle {
28    width100%;
29    height100%;
30    transform-style: preserve-3d;
31    animation: rotateY 18s linear infinite;
32}
33.circle li {
34    width100%;
35    height100%;
36    positionabsolute;
37    top0;
38    left0;
39    z-index1;
40    border-radius: 50%;
41    border5px solid #4BBAF2;
42    background-colortransparent;
43    box-sizing: border-box;
44}
45.circle li:nth-child(1) {
46    transform: rotateX(0deg) rotateY(60deg) rotateZ(0deg);
47}
48.circle li:nth-child(2) {
49    transform: rotateX(0deg) rotateY(120deg) rotateZ(0deg);
50}
51.circle li:nth-child(3) {
52    transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
53}
54.circle li span {
55    displayblock;
56    width100%;
57    height100%;
58    border-radius: 50%;
59    border5px solid;
60    border-color: rgba(0822171) rgba(082217, .4) rgba(082217, .3) rgba(255255255, .2);
61    box-sizing: border-box;
62    animation: rotate 3s linear infinite;
63}
64.circle li:nth-child(2) span {
65    animation-delay: 1s;
66}
67.circle li:nth-child(2) span {
68    animation-delay: 2s;
69}