当前位置：首页 > CSS

css小船制作

2026-03-11 15:08:55CSS

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;
}

进阶效果

添加波浪动画增强场景感：

css小船制作

.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%); }
}