css小船制作教程
CSS小船制作方法
使用CSS绘制小船可以通过纯代码实现矢量图形效果，以下是两种常见方法：
方法一：使用CSS基本形状组合
通过div元素和CSS的border属性创建三角形船体，结合圆形或矩形元素作为船帆。
<div class="boat">
<div class="sail"></div>
<div class="base"></div>
</div>.boat {
position: relative;
width: 200px;
height: 150px;
}
.base {
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 60px solid #8B4513; /* 棕色船体 */
}
.sail {
position: absolute;
top: -80px;
left: 50px;
width: 4px;
height: 80px;
background: #654321; /* 桅杆颜色 */
}
.sail:after {
content: '';
position: absolute;
top: 0;
left: -40px;
width: 0;
height: 0;
border-right: 45px solid #FFFFFF;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
}方法二：使用CSS clip-path绘制复杂形状
通过clip-path属性自定义多边形路径，实现更精细的船体设计。
.boat {
width: 180px;
height: 100px;
background-color: #5D4037;
clip-path: polygon(
0% 40%,
20% 0%,
80% 0%,
100% 40%,
80% 70%,
20% 70%
);
}
.wave {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background: #2196F3;
border-radius: 50%;
}动画效果增强
添加CSS动画让小船有漂浮效果：
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.boat {
animation: float 3s ease-in-out infinite;
}响应式调整
使用vw单位使小船能适应不同屏幕尺寸：
.boat {
width: 20vw;
height: 11vw;
}以上代码组合后可创建一个具有动态效果的CSS小船，可根据需要调整颜色、尺寸和动画参数。
