css中怎样制作漂浮的感觉

CSS中的漂浮效果经常被用来为网站添加动态的元素，并吸引访问者的眼球。下面我们将介绍几种制作漂浮感觉的方法，以供参考。

/* 1. 使用绝对定位 */
.float {
    position: absolute;
    top: 10px;  /* 距离顶部的距离 */
    left: 10px;  /* 距离左侧的距离 */
    animation: float 2s ease-in-out infinite;  /* 漂浮动画 */
}

/* 2. 使用浮动 */
.float {
    float: left;
    margin-right: 10px;  /* 元素之间的间距 */
    animation: float 2s ease-in-out infinite;  /* 漂浮动画 */
}

/* 3. 使用transform */
.float {
    transform: translate(0, 20px);  /* 初始位置 */
    animation: float 2s ease-in-out infinite;  /* 漂浮动画 */
}

/* 动画 */
@keyframes float {
    0% { transform: translate(0, 0); }
    50% { transform: translate(0, 20px); }
    100% { transform: translate(0, 0); }
} 

以上是三种常用的制作漂浮效果的方式，它们各有优缺点，根据实际需要选择使用。当然，还有许多其他方法也可以实现漂浮效果，如使用table-cell、flex等布局方式，具体使用视情况而定。