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技巧，可以创建出从简单到复杂的各种小船效果。调整边框宽度和颜色可以改变船体形状，而动画属性能让小船看起来像是在水上漂浮。