css风车制作
使用CSS制作风车效果
通过CSS的动画和变形属性可以创建一个简单的风车效果。以下是实现方法：
HTML结构
<div class="windmill">
<div class="blades"></div>
<div class="center"></div>
</div>CSS样式
.windmill {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
}
.center {
position: absolute;
width: 30px;
height: 30px;
background: #333;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.blades {
position: absolute;
width: 100%;
height: 100%;
animation: spin 2s linear infinite;
}
.blades::before, .blades::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 100px solid #f7931e;
top: 50%;
left: 50%;
}
.blades::before {
transform: translate(-50%, -50%) rotate(0deg);
}
.blades::after {
transform: translate(-50%, -50%) rotate(90deg);
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}添加更多风车叶片
要创建四叶片风车，可以修改CSS如下：
.blades::before {
transform: translate(-50%, -50%) rotate(0deg);
}
.blades::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.blades span {
position: absolute;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 100px solid #f7931e;
top: 50%;
left: 50%;
}
.blades span:nth-child(1) {
transform: translate(-50%, -50%) rotate(45deg);
}
.blades span:nth-child(2) {
transform: translate(-50%, -50%) rotate(135deg);
}创建3D风车效果
添加一些透视和阴影可以增强立体感：
.windmill {
perspective: 1000px;
}
.blades {
transform-style: preserve-3d;
}
.blades::before, .blades::after {
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}控制风车速度
通过调整动画持续时间可以改变旋转速度：
.blades {
animation: spin 1s linear infinite; /* 更快 */
/* animation: spin 5s linear infinite; */ /* 更慢 */
}这些CSS技巧可以创建出各种风格的风车效果，通过调整颜色、大小和动画参数可以获得不同的视觉效果。
