弄出扇叶，直接用动画旋转装了扇叶的盒子代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>feng</title>
</head>
<style>
body{
background-color: black;
}
.wrap{
width: 700px;
height: 700px;
margin: 200px auto;
position: relative;
}
/* 风扇叶子整体 */
.wrap_box1{
position: relative;
width: 300px;
height: 300px;
z-index: 2;
animation: change 2s linear infinite;
}
/* 动画 */
@keyframes change{
100%{
transform: rotate(360deg);
}
}
/* 风扇叶子 */
.feng1 ,.feng2,.feng3,.feng4{
width: 70px;
height: 50px;
border-radius:0 50% 0 50%;
/* 叶子颜色渐变也 */
background:linear-gradient(red,rgb(225, 0, 255));
}
.feng1 {
position: absolute;
top: 80px;
left: 123px;
/* 调整扇叶角度 */
transform: rotate(66deg);
/* 可单独给每个叶子设置一个颜色 */
/* background-color: rgb(236, 12, 12); */
}
.feng2{
position: absolute;
top: 135px;
left: 160px;
transform: rotate(160deg);
/* background-color: rgb(231, 143, 12); */
}
.feng3 {
position: absolute;
top: 171px;
left: 108px;
transform: rotate(246deg);
/* background-color: rgb(45, 16, 212); */
}
.feng4{
position: absolute;
position: absolute;
top: 120px;
left: 67px;
/* background-color: rgb(241, 13, 165); */
transform: rotate(336deg);
}
/* 中间的原点 */
.yuan{
position: absolute;
top: 140px;
left: 140px;
width: 20px;
height: 20px;
border-radius:50%;
background-color: rgb(165, 233, 7);
}
/* 柱子 */
.zhu{
position: absolute;
top: 150px;
left: 145px;
width: 5px;
height: 200px;
background-color: green;
}
</style>
<body>
<div class="wrap">
<div class="wrap_box1">
<div class="feng1"></div>
<div class="feng2"></div>
<div class="feng3"></div>
<div class="feng4"></div>
<div class="yuan"></div>
</div>
<div class="zhu"></div>
</div>
</body>
</html>
运行后是动态的，插入的图片为静态截图 
1486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
