当前位置：首页 > CSS

css制作漂浮图

2026-04-01 16:32:16CSS

使用CSS制作漂浮图

方法一：使用CSS动画和`@keyframes`

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

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

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

方法二：使用`transition`实现缓动效果

通过transition和hover状态实现交互式漂浮效果。

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

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

方法三：结合阴影增强立体感

为漂浮元素添加阴影，增强视觉层次感。

css制作漂浮图

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

方法四：使用`filter`添加模糊效果

通过filter属性实现动态模糊，模拟运动轨迹。

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

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

方法五：多元素错位漂浮

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

css制作漂浮图

.floating-image:nth-child(1) {
    animation: float 3s ease-in-out infinite;
}

.floating-image:nth-child(2) {
    animation: float 3s ease-in-out 0.5s infinite;
}

.floating-image:nth-child(3) {
    animation: float 3s ease-in-out 1s infinite;
}

方法六：3D漂浮效果

使用rotate3d实现更复杂的3D漂浮动画。

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

@keyframes float-3d {
    0%, 100% {
        transform: rotate3d(0, 0, 0, 0deg) translateY(0);
    }
    50% {
        transform: rotate3d(1, 1, 0, 10deg) translateY(-20px);
    }
}

方法七：结合SVG和CSS

为SVG图像添加漂浮动画，适用于矢量图形。

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

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