当前位置：首页 > CSS

css小船制作教程

2026-01-28 15:42:25CSS

使用CSS绘制小船

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

<!DOCTYPE html>
<html>
<head>
    <style>
        .boat {
            width: 200px;
            height: 100px;
            background-color: #8B4513;
            clip-path: polygon(0% 100%, 20% 40%, 80% 40%, 100% 100%);
            position: relative;
            margin: 100px auto;
        }

        .sail {
            width: 80px;
            height: 120px;
            background-color: #FFFFFF;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            position: absolute;
            top: -120px;
            left: 60px;
        }

        .wave {
            width: 100%;
            height: 20px;
            background-color: #1E90FF;
            border-radius: 50%;
            position: absolute;
            bottom: -10px;
        }
    </style>
</head>
<body>
    <div class="boat">
        <div class="sail"></div>
        <div class="wave"></div>
    </div>
</body>
</html>

添加动画效果

通过CSS动画让小船产生漂浮效果：

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

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

.wave {
    animation: wave 2s linear infinite;
}

@keyframes wave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-20px); }
}

进阶版本带细节

添加更多细节提升视觉效果：

.boat::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 150px;
    background: #A0522D;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
}

.sail::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 120px;
    background: #000;
    left: 50%;
    transform: translateX(-50%);
}

响应式调整

使用CSS变量实现尺寸调整：

:root {
    --boat-width: 200px;
    --boat-height: 100px;
}

@media (max-width: 600px) {
    :root {
        --boat-width: 150px;
        --boat-height: 75px;
    }
}

浏览器兼容方案

为不支持clip-path的浏览器提供备选方案：

.boat {
    background: linear-gradient(to bottom, transparent 40%, #8B4513 40%);
}

.sail {
    background: linear-gradient(to right bottom, transparent 50%, #FFFFFF 50%),
                linear-gradient(to left bottom, transparent 50%, #FFFFFF 50%);
}

css小船制作教程