css做漂浮物 |css鼠标经过图片慢慢放大

{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translate(-50%, -50%);
}
50% {
transform: translate(-50%, -45%);
}
100% {
transform: translate(-50%, -50%);
}
}

上面的CSS代码是一个简单的漂浮物实例。其中position属性设置为fixed，表示漂浮物固定在页面上，不随页面滚动。使用top和left属性将漂浮物定位到了页面中心，配合transform属性实现了垂直居中和水平居中。漂浮物采用了动画效果，使用animation属性进行定义，循环无限次数，名为float的动画在3秒的时间内先缓慢后迅速地让漂浮物进行位置变化。

@keyframes语法用于定义一个动画。在上述代码中，动画是从0%开始，漂浮物位于垂直和水平方向的居中位置，到达50%时，让漂浮物在垂直方向移动了5%，到达动画结束时，漂浮物回到了开始的位置。通过transform属性实现了漂浮物的位移。

通过CSS制作漂浮物，可以增加网站的互动性、美观度和使用体验。漂浮物效果的设置并非难事，只需要简单的CSS代码便可实现。