当前位置：首页 > CSS

css制作小船

2026-04-01 07:22:31CSS

使用CSS绘制小船

通过纯CSS可以创建简单的矢量图形，以下是实现小船效果的代码示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .boat {
            width: 200px;
            height: 100px;
            background: #8B4513;
            border-radius: 50% 50% 0 0;
            position: relative;
            margin-top: 100px;
        }

        .boat:after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 80px solid #FFF;
            top: -80px;
            left: 50%;
            transform: translateX(-50%);
        }

        .water {
            width: 300px;
            height: 20px;
            background: #1E90FF;
            border-radius: 0 0 50% 50%;
            margin-top: -10px;
        }
    </style>
</head>
<body>
    <div class="boat"></div>
    <div class="water"></div>
</body>
</html>

进阶小船设计

更复杂的小船效果可以通过添加更多CSS元素实现：

.boat-container {
    position: relative;
    width: 250px;
    height: 150px;
}

.boat-hull {
    width: 200px;
    height: 60px;
    background: #CD853F;
    border-radius: 50% 50% 0 0;
    position: absolute;
    bottom: 0;
}

.boat-mast {
    width: 5px;
    height: 100px;
    background: #654321;
    position: absolute;
    bottom: 60px;
    left: 100px;
}

.boat-sail {
    width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 120px solid #F5F5F5;
    position: absolute;
    bottom: 60px;
    left: 105px;
}

动画效果

添加CSS动画让小船晃动：

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

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

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

.water {
    animation: wave 3s ease-in-out infinite;
}

响应式设计

使用CSS变量使小船尺寸可调整：

css制作小船

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

.boat {
    width: var(--boat-width);
    height: var(--boat-height);
}

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

这些CSS代码可以组合使用来创建不同样式的小船效果，通过调整参数可以改变小船的大小、颜色和形状。