css小船制作
CSS小船制作方法
使用CSS绘制小船可以通过纯代码实现，无需图片。以下是两种常见的小船样式制作方法：
基础小船样式
通过div元素和CSS的border属性创建三角形船体和矩形船帆：
.boat {
position: relative;
width: 120px;
height: 60px;
}
.boat-body {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 30px solid #8B4513;
}
.boat-sail {
position: absolute;
top: -40px;
left: 50px;
width: 20px;
height: 40px;
background: #FFFFFF;
}进阶小船动画
添加波浪效果和漂浮动画：
.water {
position: relative;
height: 20px;
background: #1E90FF;
overflow: hidden;
}
.wave {
position: absolute;
bottom: 0;
width: 200%;
height: 20px;
background: url('wave-pattern.png') repeat-x;
animation: wave 3s linear infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes wave {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}完整HTML结构示例
<div class="scene">
<div class="water">
<div class="wave"></div>
</div>
<div class="boat">
<div class="boat-body"></div>
<div class="boat-sail"></div>
</div>
</div>优化建议
- 使用CSS变量控制颜色便于修改
- 添加
box-shadow创造立体感 - 通过
transform: rotate()实现帆船倾斜效果 - 响应式设计时使用
vw/vh单位
通过组合这些CSS技巧，可以创建出从简单到复杂的各种小船效果。调整边框宽度和颜色可以改变船体形状，而动画属性能让小船看起来像是在水上漂浮。
