纯css3打造旋转太极

新入博客园，发点以前写的东西占个位先

效果：

html:

<div class="a1">
    <div class="b1"></div>
    <div class="c1">
        <div class="c2"></div>
    </div>
    <div class="d1">
        <div class="d2"></div>
    </div>
</div>

css: 

* {margin:0;padding:0;}
body {background-color:#000;}
.a1{position:relative;width:500px;height:500px;overflow:hidden;margin:50px auto 0;background-color:#FFFFFF;border-radius:50%;box-shadow:0 0 50px #FFFFFF;-webkit-transition: all 3s ease-in;-moz-transition: all 3s ease-in;}
.d1{position:absolute;top:50%;right:25%;width:50%;height:50%;background-color:#000000;border-radius:50%;}
.d2{position:absolute;top:40%;right:38%;width:25%;height:25%;background-color:#FFFFFF;border-radius:50%;}
.c1{position:absolute;top:0;right:25%;width:50%;height:50%;background-color:#FFFFFF;border-radius:50%;}
.c2{position:absolute;top:40%;right:38%;width:25%;height:25%;background-color:#000000;border-radius:50%;}
.b1{position:absolute;top:0;right:0;width:250px;height:500px;background-color:#000000;border-radius:0 250px 250px 0;}
@-webkit-keyframes rotation1 {
from {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}
}
@-webkit-keyframes rotation2 {
from {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}
}
@-webkit-keyframes rotation3 {
from {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}
}
@-moz-keyframes rotation1 {
from {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}
}
@-moz-keyframes rotation2 {
from {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}
}
@-moz-keyframes rotation3 {
from {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}
}
@-o-keyframes rotation1 {
from {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}
}
@-o-keyframes rotation2 {
from {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}
}
@-o-keyframes rotation3 {
from {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}
}
.a1 {
    -moz-animation: rotation1 30s linear infinite;
    -o-animation: rotation1 30s linear infinite;
    -webkit-animation: rotation1 30s linear infinite;
    animation: rotation1 30s linear infinite
}

demo

 

 

转载于:https://www.cnblogs.com/EkingWee/p/3314973.html

来源：https://blog.csdn.net/weixin_30306905/article/details/98759714