当前位置：首页 > CSS

css制作小船

2026-02-27 07:46:47CSS

CSS制作小船的方法

使用CSS绘制小船可以通过多种方式实现，以下是两种常见的方法：纯CSS绘制和结合SVG的CSS动画。

纯CSS绘制小船

通过CSS的border、transform和::before/::after伪元素可以绘制简单的小船形状。

.boat {
    width: 120px;
    height: 60px;
    background-color: #8B4513;
    border-radius: 50% 50% 0 0;
    position: relative;
}

.boat::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 100px solid #FFD700;
    top: -100px;
    left: 0;
}

.boat::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 80px;
    background-color: #A0522D;
    top: -80px;
    left: 58px;
}

结合SVG和CSS动画

通过SVG绘制小船，再用CSS添加动画效果，可以实现更生动的效果。

<svg width="200" height="200" viewBox="0 0 200 200">
    <path id="boat" d="M50,100 L150,100 L120,150 L80,150 Z" fill="#8B4513" />
    <path id="sail" d="M100,100 L100,50 L140,70 Z" fill="#FFD700" />
</svg>

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

#sail {
    animation: sway 2s ease-in-out infinite;
}

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

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

使用CSS Clip-path

通过clip-path属性可以创建更复杂的形状，如小船。

.boat {
    width: 150px;
    height: 80px;
    background-color: #8B4513;
    clip-path: polygon(0% 50%, 20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%);
    position: relative;
}

添加波浪效果

为了让小船看起来像是在水中浮动，可以添加波浪背景。

.wave {
    width: 100%;
    height: 20px;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        #1E90FF 10px,
        #1E90FF 20px
    );
    animation: wave 2s linear infinite;
}

@keyframes wave {
    0% { background-position-x: 0; }
    100% { background-position-x: 40px; }
}

通过以上方法，可以灵活地实现不同风格的小船效果，并根据需要调整颜色、大小和动画细节。

css制作小船