css小船制作
CSS小船制作方法
使用CSS绘制小船主要涉及利用div元素和CSS样式属性（如border、transform、box-shadow）组合成船体和船帆的图形效果。
船体部分
船体通常通过底部圆角矩形和三角形组合实现：
<div class="boat-body"></div>.boat-body {
width: 120px;
height: 30px;
background: #8B4513; /* 木质颜色 */
border-radius: 0 0 50% 50%;
position: relative;
}船帆部分
船帆可通过三角形或梯形实现：
<div class="sail"></div>.sail {
width: 0;
height: 80px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 100px solid white;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 30px;
}完整示例代码
<div class="boat">
<div class="sail"></div>
<div class="boat-body"></div>
</div>.boat {
position: relative;
width: 200px;
height: 150px;
}
.boat-body {
width: 120px;
height: 30px;
background: #8B4513;
border-radius: 0 0 50% 50%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.sail {
width: 0;
height: 80px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 100px solid #F0F8FF;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 30px;
}进阶效果
添加波浪动画增强场景感：
.wave {
position: absolute;
width: 200%;
height: 20px;
background: repeating-linear-gradient(
-45deg,
#1E90FF,
#1E90FF 10px,
#00BFFF 10px,
#00BFFF 20px
);
bottom: 0;
left: -50%;
animation: waveMove 3s linear infinite;
}
@keyframes waveMove {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}注意事项
- 使用
position: absolute确保船体部件对齐 - 通过
transform实现居中定位 - 调整
border属性值可改变帆的形状（如梯形帆） - 添加
box-shadow可增强立体感
通过组合基础形状和CSS变换，可以创建不同风格的小船，如独木舟或帆船。调整颜色和比例参数可获得个性化设计效果。
