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小船，可根据需要调整颜色、尺寸和动画参数。