当前位置：首页 > CSS

用css制作小船

2026-04-02 13:46:42CSS

使用CSS绘制小船

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

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

.boat {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #8B4513; /* 船体颜色 */
  position: relative;
  transform: rotate(180deg);
}

.boat:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 80px;
  background: #A0522D; /* 桅杆颜色 */
  left: 50%;
  top: -80px;
  transform: translateX(-50%);
}

.boat:before {
  content: "";
  position: absolute;
  width: 60px;
  height: 30px;
  background: #D2B48C; /* 帆布颜色 */
  left: 50%;
  top: -60px;
  transform: translateX(-50%) skew(20deg);
}

添加波浪效果

为了让小船更生动，可以添加波浪动画效果：

用css制作小船

.wave {
  position: absolute;
  width: 200%;
  height: 20px;
  background: #1E90FF;
  bottom: -10px;
  left: -50%;
  border-radius: 50%;
  animation: wave 3s linear infinite;
}

@keyframes wave {
  0% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(-25%) rotate(2deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

完整示例代码

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

<style>
.scene {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #87CEEB;
  overflow: hidden;
}

.boat {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #8B4513;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
}

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

.boat:before {
  content: "";
  position: absolute;
  width: 60px;
  height: 30px;
  background: #D2B48C;
  left: 50%;
  top: -60px;
  transform: translateX(-50%) skew(20deg);
}

.wave {
  position: absolute;
  width: 200%;
  height: 20px;
  background: #1E90FF;
  bottom: 30px;
  left: -50%;
  border-radius: 50%;
  animation: wave 3s linear infinite;
}

@keyframes wave {
  0% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(-25%) rotate(2deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}
</style>

这个示例创建了一个带有桅杆和帆的简单小船，并添加了波浪动画效果。可以通过调整CSS属性值来改变船的大小、颜色和形状。