科技感图片漂浮CSS样式

2024-5-16 211 CSS

如果你想让图片在不使用position: absolute;的情况下轻轻漂浮，并且能够自适应容器的大小，可以使用CSS的box-sizing、padding-top和float属性来实现。下面是一个修改后的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轻轻漂浮</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <img src="图片地址" alt="漂浮图片示例">
    </div>
</body>
</html>

在这个例子中，我们不再使用position: absolute;来定位图片，而是利用padding-bottom创建一个与图片比例相适应的高度，这样图片就可以在容器内随内容而自适应大小。

CSS动画float定义了图片轻轻上下漂浮的动画过程，通过改变translate的垂直位置来实现漂浮效果。这个动画被应用到图片上，通过animation属性设置动画名称、持续时间和播放次数等信息。

注意：上面代码中的图片URL你可以在实际项目中替换为你想要的图片URL。同时，padding-bottom的值需要根据你的图片的比例来适当调整。在这个例子中，我们使用了56.25%，这适合于一个宽高比约为16:9的图片

.container {
    position: relative;
    width: 100%; /* 或者你可以设置具体的像素值 */
    height: 0;
    padding-bottom: 56.25%; /* 这个值应该根据图片的比例来调整 */
    box-sizing: border-box;
    overflow: hidden;
}

.container img {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: float 2s infinite ease-in-out;
}

@keyframes float {
    0% { transform: translate(0, 0); }
    50% { transform: translate(0, 5px); }/* 增加浮动幅度 */
    100% { transform: translate(0, 0); }
}

正文完

CSS html 前端特效

评论区