<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
background: #00FFFF;
}
.box{
width: 200px;height: 200px;border-radius: 50%;
background-image: linear-gradient(to right,#fff 50% , #000 50%);/* 线性渐变出黑白色 */
margin: 50px auto;
animation: play 4s linear infinite alternate-reverse; /* 八卦旋转动画 */
}
.box1{
width: 100px;height: 100px;border-radius: 50%;
margin: auto;background: white;
display: flex; /* 弹性盒 */
}
.box2{
width: 100px;height: 100px;border-radius: 50%;
margin: auto;background: black;
display: flex; /* 弹性盒 */
}
.dian1{
width: 30px;height: 30px;border-radius: 50%;
background-color: black;margin: auto;
}
.dian2{
width: 30px;height: 30px;border-radius: 50%;
background-color: white;margin: auto;
}
@keyframes play{
0%{transform: rotate(0);}
100%{transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<div class="dian1"></div>
</div>
<div class="box2">
<div class="dian2"></div>
</div>
</div>
</body>
</html>
Css3边框圆角属性做八卦
最新推荐文章于 2021-08-03 23:07:51 发布