先看效果圖
這個看上去就是一個百事可樂的一個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>
以上寫的不好的地方請各位大佬指點一下，祝暴富