当前位置：首页 > CSS

css小船制作视频

2026-03-12 14:17:59CSS

css小船制作视频

使用CSS制作小船动画效果可以通过纯代码实现，无需视频教程。以下是关键步骤和代码示例：

船体基础结构

通过div元素和CSS形状组合创建船体。以下代码生成一个三角形船体：

css小船制作视频

.boat {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #8B4513; /* 棕色船体 */
  position: relative;
}

添加水面波纹

使用伪元素和动画创建动态水面效果：

css小船制作视频

.water {
  position: relative;
  height: 20px;
  background: #1E90FF;
  overflow: hidden;
}
.water::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 100%;
  background: rgba(255,255,255,0.2);
  animation: wave 3s linear infinite;
  border-radius: 40%;
}
@keyframes wave {
  0% { transform: translateX(0) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}

船帆制作

通过旋转矩形和渐变颜色实现帆布效果：

.sail {
  width: 5px;
  height: 80px;
  background: linear-gradient(to right, #FFF, #DDD);
  position: absolute;
  top: -90px;
  left: 50%;
  transform: rotate(10deg);
  transform-origin: bottom center;
}

完整动画组合

将船体与水面结合，添加摇摆动画：

<div class="scene">
  <div class="boat">
    <div class="sail"></div>
  </div>
  <div class="water"></div>
</div>

<style>
  .scene {
    position: relative;
    height: 200px;
  }
  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
  }
  .boat {
    animation: float 3s ease-in-out infinite;
  }
</style>