css小船制作教程

2026-02-13 10:01:30CSS

使用CSS绘制小船

通过CSS的clip-path属性和基本形状可以绘制简单的小船图形。以下是一个基础的CSS小船实现方案：

<div class="boat"></div>

.boat {
  width: 200px;
  height: 100px;
  background-color: #8B4513; /* 棕色船身 */
  clip-path: polygon(
    0% 50%,
    50% 0%,
    100% 50%,
    80% 100%,
    20% 100%
  );
  position: relative;
}

.boat::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 80px;
  background-color: #A0522D;
  left: 50%;
  top: -80px;
  transform: translateX(-50%);
}

添加水面效果

为小船添加波浪背景增强视觉效果：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to bottom, #87CEEB 50%, #1E90FF);
}

.wave {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="%231E90FF"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%231E90FF"/></svg>');
  background-size: 1200px 100px;
  animation: wave 10s linear infinite;
}

@keyframes wave {
  0% { background-position-x: 0; }
  100% { background-position-x: 1200px; }
}

进阶帆船版本

更复杂的帆船实现方案：

<div class="sailboat">
  <div class="hull"></div>
  <div class="sail"></div>
  <div class="mast"></div>
</div>

.sailboat {
  position: relative;
  width: 200px;
  height: 200px;
}

.hull {
  position: absolute;
  bottom: 0;
  width: 150px;
  height: 40px;
  background-color: #5D4037;
  border-radius: 0 0 20px 20px;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

.mast {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 4px;
  height: 120px;
  background-color: #795548;
  transform: translateX(-50%);
}

.sail {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 100px solid #ECEFF1;
  transform: translateX(-50%);
}

动画效果

为小船添加漂浮动画：

css小船制作教程

.boat {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

这些CSS技术结合使用可以创建从简单到复杂的不同小船效果，通过调整尺寸、颜色和形状参数可获得各种风格的船只图形。