<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大风车</title>
<style>
#box{
width: 400px;
height: 400px;
margin: 200px auto;
position: relative;
}
#main{
width: 400px;
height: 400px;
animation: dfc 1.5s linear infinite;
}
.y1,.y2,.y3,.y4{
width: 200px;
height: 100px;
border: 1px solid blue;
border-radius: 100px 100px 0 0;
position: absolute;
background-image: linear-gradient(green,yellow);
}
.y1{
top: 100px;
}
.y2{
top: 50px;
left: 150px;
transform: rotate(90deg);
}
.y3{
top: 200px;
left: 200px;
transform: rotate(180deg);
}
.y4{
top: 250px;
left: 50px;
transform: rotate(270deg);
}
.dd{
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
top: 150px;
left: 150px;
z-index: 10;
background-image: radial-gradient(yellow,#fff);
}
.h{
width: 12px;
height: 350px;
background-image: radial-gradient(blue,#fff);
position: absolute;
top: 200px;
left: 199px;
z-index: -1;
}
@keyframes dfc{
0%{
transform:rotate(0deg);
}
25%{
transform:rotate( 90deg);
}
50%{
transform:rotate(180deg);
}
75%{
transform:rotate(270deg);
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div id="box">
<div id="main">
<div class="y1"></div>
<div class="y2"></div>
<div class="y3"></div>
<div class="y4"></div>
<div class="dd"></div>
</div>
<div class="h"></div>
</div>
</body>
</html>
先用div确定好风车样式，利用CSS的transform对div进行角度旋转
#main样式用animation指定css3动画效果，animation具体用法参考：https://www.w3school.com.cn/cssref/pr_animation.asp
#main{
width: 400px;
height: 400px;
animation: dfc 1.5s linear infinite;
}
dfc keyframes 动画效果，0%这些是关键帧位置（动画时长，用百分比控制），使用rotate就行旋转。
keyframes ：https://www.w3school.com.cn/cssref/pr_keyframes.asp
transform:https://www.w3school.com.cn/cssref/pr_transform.asp
@keyframes dfc{
0%{
transform:rotate(0deg);
}
25%{
transform:rotate( 90deg);
}
50%{
transform:rotate(180deg);
}
75%{
transform:rotate(270deg);
}
100%{
transform:rotate(360deg);
}
}
总的来说就是每次旋转耗时1.5s，然后又分成5个动画，每个动画在.03s内旋转90度，一直循环下去
您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632