当前位置：首页 > CSS

css制作漂浮图

2026-02-13 07:41:50CSS

使用CSS制作漂浮图

方法一：使用CSS动画实现漂浮效果

通过@keyframes定义动画，结合transform和animation属性实现漂浮效果。

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

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

将漂浮效果应用到图片元素上：

<img src="your-image.jpg" class="floating-image" alt="Floating Image">

方法二：结合过渡效果实现平滑漂浮

通过transition和:hover伪类实现交互式漂浮效果。

.floating-image {
    transition: transform 0.5s ease;
}

.floating-image:hover {
    transform: translateY(-10px);
}

方法三：添加阴影增强漂浮感

结合box-shadow属性增强漂浮的视觉层次感。

.floating-image {
    animation: float 3s ease-in-out infinite;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

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

方法四：多元素错落漂浮

通过为不同元素设置不同的动画延迟，实现错落有致的漂浮效果。

css制作漂浮图

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

.floating-image:nth-child(1) {
    animation-delay: 0s;
}

.floating-image:nth-child(2) {
    animation-delay: 0.5s;
}

.floating-image:nth-child(3) {
    animation-delay: 1s;
}

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

这些方法可以单独使用，也可以组合使用以达到更丰富的漂浮效果。调整动画持续时间、漂浮距离和缓动函数可以改变漂浮的节奏和风格。

标签: css