css小船制作教程

2026-04-01 18:56:37CSS

使用CSS绘制小船

通过CSS的clip-path属性和基本形状组合可以绘制一艘简单的小船。以下是实现步骤：

css小船制作教程

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

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

添加船帆效果

为小船增加三角形船帆：

css小船制作教程

.boat::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 80px solid #FFFFFF;
}

创建水面波纹

使用伪元素和box-shadow制作波浪效果：

.boat::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  background: radial-gradient(
    circle at 10px 15px, 
    transparent 10px, 
    #1E90FF 11px
  );
  background-size: 20px 20px;
}

添加动画效果

让小船有轻微的摇晃动画：

@keyframes rock {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

.boat {
  animation: rock 3s ease-in-out infinite;
  transform-origin: bottom center;
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
<style>
.boat {
  width: 200px;
  height: 100px;
  background-color: #8B4513;
  clip-path: polygon(
    0% 70%, 
    20% 70%, 
    30% 50%, 
    70% 50%, 
    80% 70%, 
    100% 70%,
    80% 100%,
    20% 100%
  );
  position: relative;
  animation: rock 3s ease-in-out infinite;
  transform-origin: bottom center;
}

.boat::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 80px solid #FFFFFF;
}

.boat::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  background: radial-gradient(
    circle at 10px 15px, 
    transparent 10px, 
    #1E90FF 11px
  );
  background-size: 20px 20px;
}

@keyframes rock {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
</style>
</head>
<body>
<div class="boat"></div>
</body>
</html>

这些CSS技巧组合使用可以创建出具有基本形状、细节和动画效果的小船图形。通过调整尺寸、颜色和动画参数可以获得不同的视觉效果。