css小船制作

CSS小船制作方法

使用纯CSS绘制小船可以通过组合基本形状（如矩形、三角形）和CSS变换实现。以下是两种常见实现方式：

基础船体绘制

通过border属性创建三角形船体和矩形船舱：

.boat {
  position: relative;
  width: 200px;
  height: 100px;
}
.boat-hull {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 50px solid #8B4513; /* 棕色船底 */
}
.boat-cabin {
  position: absolute;
  top: 20px;
  left: 50px;
  width: 100px;
  height: 30px;
  background: #A0522D; /* 深棕色船舱 */
}

进阶波浪效果船

添加伪元素创建波浪动态效果：

.boat-waves {
  position: relative;
  width: 200px;
  height: 120px;
  overflow: hidden;
}
.boat-waves::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 400px;
  height: 20px;
  background: repeating-linear-gradient(
    -45deg,
    #1E90FF,
    #1E90FF 10px,
    #00BFFF 10px,
    #00BFFF 20px
  );
  animation: wave 3s linear infinite;
}
@keyframes wave {
  from { transform: translateX(0); }
  to { transform: translateX(-100px); }
}

3D透视船

使用CSS变换实现立体感：

.boat-3d {
  transform-style: preserve-3d;
  transform: perspective(500px) rotateX(10deg);
}
.boat-3d .sail {
  transform: rotateY(20deg) skewX(-10deg);
  background: linear-gradient(to right, #FFF, #EEE);
}

关键技巧：

• 使用border生成三角形
• 通过position: absolute定位船部件
• 伪元素创建辅助图形
• transform实现立体效果
• animation添加动态波浪

完整示例需结合HTML结构：

<div class="boat">
  <div class="boat-hull"></div>
  <div class="boat-cabin"></div>
</div>