目录
一.主要思路
div和伪元素两种方法都类似
1.div思路
创建一个大盒子并设置弧度(一个大圆),在内创建两个小盒子(两个小圆)设置弧度调整位置,为几个盒子设置颜色,最后赋予动画效果即可
2.伪元素思路
创建一个大盒子并设置弧度(一个大圆),在内设定前后元素,为前后元素设置宽高、弧度等属性,赋予颜色和动画效果即可
二.完整代码
1.div写法
(1)演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@keyframes mytaiji{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.all{
width: 0;
height: 500px;
border-radius: 50%;
border-left: 250px solid white;
border-right: 250px solid black;
animation: mytaiji 2s infinite linear;
}
.top,.bottom{
width: 90px;
height: 90px;
border-radius: 50%;
margin-left: -125px;
}
.top{
border: 80px solid white;
background-color: black;
}
.bottom{
border: 80px solid black;
background-color: white;
}
/* .border{
width: 499px;
height: 499px;
border: 1px solid black;
border-radius: 50%;
} */
body{
background-color: lemonchiffon;
}
</style>
</head>
<body>
<div class="border">
<div class="all">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
(2)附上部分参考注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@keyframes mytaiji{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
/*设置动画效果,全方位旋转*/
.all{
width: 0;
height: 500px;
border-radius: 50%; /*设置宽高、边框弧度*/
border-left: 250px solid white;
border-right: 250px solid black;
/*设置大圆形内左右两边的颜色,这个边框弧度需要结合写的宽高进行调整*/
animation: mytaiji 2s infinite linear; /*为这个大图设置动画效果*/
}
.top,.bottom{
width: 90px;
height: 90px;
border-radius: 50%;
margin-left: -125px;
}
/*根据大圆的宽高状况设置两个小圆的宽高和弧度,并调整他们的左右位置*/
.top{
border: 80px solid white;
background-color: black;
}
.bottom{
border: 80px solid black;
background-color: white;
}
/*调整边框宽度和颜色来控制小黑圈和小白圈周围的样式*/
/* .border{
width: 499px;
height: 499px;
border: 1px solid black;
border-radius: 50%;
} */
/*这一步可以省略,主要是为了设置左边白色区域的黑边框,更美观,也可以通过为整个页面设置背景颜色使得边框效果更明显*/
body{
background-color: lemonchiffon;
}
</style>
</head>
<body>
<div class="border">
<div class="all">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
2.伪元素写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@keyframes mytaiji{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.all{
width: 0;
height: 500px;
border-radius: 50%;
border-left: 250px solid white;
border-right: 250px solid black;
animation: mytaiji 2s infinite linear;
}
.all::before,.all::after{
height: 90px;
width: 90px;
border: 80px solid red;
border-radius: 50%;
content: ""; /*content属性在伪元素选择器中建议写上,尽管不添加内容也写上*/
display: block; /*将元素转化为块元素,支持设置宽高等属性*/
margin-left: -125px;
}
.all::before{
border: 80px solid white;
background-color: black;
}
.all::after{
border: 80px solid black;
background-color: white;
}
body{
background-color: cornsilk;
}
</style>
</head>
<body>
<div class="all"></div>
</body>
</html>
三.最终效果
div写法效果
伪元素写法效果