css漂浮移动

CSS中有很多特效，其中漂浮移动效果是很有特色的一种。可以让页面更加生动，吸引用户的眼球。这种效果可以在多个元素上实现，例如图片，文字等。下面，我们来看一下如何实现。

//HTML部分
<div class="float-box">
<img src="example.jpg" alt="example">
</div>
//CSS部分
.float-box {
position: relative;
width: 200px;
height: 200px;
margin: 20px auto;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}

在上面的代码中，我们创建了一个名为float-box的div元素，并在其中加入了一个图片。接着，通过设置float-box的position为relative属性，使其成为相对定位元素。在加入animation动画，让元素实现漂浮移动的动画效果。

在动画部分，我们使用了CSS3的@keyframes规则，定义了动画的关键帧，通过设置transform的translateY属性，控制元素的垂直位移。

这是一个很简单的实现漂浮移动效果的例子，可以根据实际需求和元素的不同，调整相应的参数，使得效果更加美观、吸引人。

查看更多关于css漂浮移动的详细内容...