当前位置：首页 > CSS

css制作小船

2026-02-12 23:09:20CSS

CSS制作小船的方法

使用CSS绘制小船可以通过纯代码实现，无需图片。以下是两种常见的方法：

方法一：利用边框和伪元素

通过CSS的border属性和伪元素创建船体和船帆的三角形结构。

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

.boat::before {
    content: "";
    position: absolute;
    left: -20px;
    top: -70px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 60px solid #FFFFFF; /* 船帆颜色 */
}

方法二：使用CSS clip-path

通过clip-path属性直接裁剪出小船形状，更灵活但兼容性需注意。

.boat {
    width: 100px;
    height: 60px;
    background-color: #8B4513;
    clip-path: polygon(
        0% 100%, 
        20% 0%, 
        80% 0%, 
        100% 100%
    );
    margin: 100px auto;
}

.sail {
    width: 10px;
    height: 80px;
    background-color: #FFFFFF;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -80px;
}

动画效果增强

添加波浪动画让小船更生动：

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

@keyframes moveWave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}