太极
思路: 左右两边div变成半圆 大圆 里面包小圆 小圆在包小小圆
然后在把颜色改成黑白就可以了
旋转大圆
注意z-index覆盖
代码里面的是黑白成品
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.left,.right{
height: 200px;
width: 100px;
}
.left{
position: relative;
border-bottom-left-radius: 100px;
border-top-left-radius: 100px;
}
.right{
position: absolute;
margin-left: 100px;
border-top-right-radius:100px ;
border-bottom-right-radius:100px ;
margin-top: -1.2px;
}
.dayuan{
height: 195px;
width: 200px;
/* background-color: green; */
margin: 0 auto;
position: relative;
animation-name: tj;
/* 设置完成时间 */
/* animation-duration: 4s; */
/* 设置动画将如何完成一个周期,告诉系统动画执行的速度 */
/* animation-timing-function: linear; */
/* 循环 */
/* animation-iteration-count: infinite; */
}
.upyuan{
height: 100px;
width: 100px;
background-color: black;
position: absolute;
left: 50px;
z-index: 2;
border-radius: 50%;
}
.upxyuan{
height: 35px;
width: 35px;
background-color: white;
margin: 15px auto;
z-index: 3;
border-radius: 50%;
}
.diyuan{
height: 100px;
width: 100px;
background-color: white;
position: absolute;
left: 50px;
top: 101px;
z-index: 2;
border-radius: 50%;
}
.dixyuan{
height: 35px;
width: 35px;
background-color:black;
margin: 50px auto;
z-index: 3;
border-radius: 50%;
}
@keyframes tj{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
大圆 里面包小圆 小圆在包小小圆 左右两边变成半圆
<body>
<div class="dayuan">
<div class="upyuan">
<div class="upxyuan"></div>
</div>
<div class="diyuan">
<div class="dixyuan"></div>
</div>
<div class="left" style="background-color: black; border: 1px solid black;">
<div class="right" style="background-color: white; border: 1px solid black;" >
</div>
</div>
</div>
</body>
</html>
呼吸灯
思路:先创建一个大的div盒子 里面放两个圆 一个大圆 一个小圆
然后根据动画 给两个圆都按一定的百分比的时候放大 并且改变颜色 最后循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
/* 正方形 */
.bg {
height: 500px;
width: 500px;
background-color: blue;
margin: 300px auto;
position: relative;
}
/* 正方形中的小圆 */
.bg .xiao {
width: 300px;
height: 300px;
border: 20px solid coral;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
box-sizing: border-box;
border-radius: 50%;
/* 设置动画 */
animation: yuan 5s ease-in-out infinite;
}
/* 正方形中的大圆 */
.bg .big {
width: 400px;
height: 400px;
border: 10px solid coral;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
box-sizing: border-box;
border-radius: 50%;
animation: yuan 5s ease-in-out infinite;
}
/* 定义动画 */
@keyframes yuan {
0% {
border-color: #fff;
/* 当前原型的大小 缩小0.6倍 */
transform: scale(0.6);
}
25% {
border-color: pink;
transform: scale(0.6);
}
50% {
border-color: rgb(110, 46, 46);
transform: scale(0.7);
}
75% {
border-color: rgb(14, 0, 95);
transform: scale(0.8);
}
100% {
border-color: rgb(26, 99, 160);
transform: scale(0.9);
}
}
</style>
<body>
<div class="bg">
<div class="xiao"></div>
<div class="big"></div>
</div>
</body>
</html>