先看效果图
这个看上去就是一个百事可乐的一个logo，看上去挺难的，其实做起来蛮简单的，就是一个大的div里面套着两个div
<body>
<div id="box">
<div id="son1"></div>
<div id="son2"></div>
</div>
</body>
1、先制作一个蓝色的背景的盒子
#box{
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #1050F5;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 150px);
}
2、制作两个小div背景颜色为红色和白色
#son1{
width: 600px;
height: 600px;
background-color: white;
position: absolute;
top: calc(50% - 540px);
left: calc(50% - 469px);
border-radius: 165px 358px 253px 403px;
}
#son2{
width: 500px;
height: 500px;
background-color: #FD0203;
position: absolute;
top: calc(50% - 481px);
left: calc(50% - 398px);
border-radius: 256px 255px 257px 345px;
}
将两个小的div制作成不规则的图形然后变成一下的样子
再给父级的盒子就一个overflow：hidden；
#box{
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #1050F5;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 150px);
overflow: hidden;
}
就变成一下这个效果
再给两个小的div一个动画效果
@keyframes son1{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes son2{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
就变成这个效果图了
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #1050F5;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 150px);
overflow: hidden;
}
#son1{
width: 600px;
height: 600px;
background-color: white;
position: absolute;
top: calc(50% - 540px);
left: calc(50% - 469px);
border-radius: 165px 358px 253px 403px;
animation: son1 3s linear 0s infinite;
}
#son2{
width: 500px;
height: 500px;
background-color: #FD0203;
position: absolute;
top: calc(50% - 481px);
left: calc(50% - 398px);
border-radius: 256px 255px 257px 345px;
animation: son2 4s linear 0s infinite;
}
@keyframes son1{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes son2{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="box">
<div id="son1"></div>
<div id="son2"></div>
</div>
</body>
</html>
以上写的不好的地方请各位大佬指点一下，祝暴富