CSS上下悬浮特效
CSS实现元素的上下悬浮特效可以使用@keyframes规则来创建动画，并使用animation属性应用到相应的元素上。以下是一个简单的例子，展示了如何使用CSS创建一个简单的上下悬浮特效：
@keyframes floatUpDown {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.float-element {
animation: floatUpDown 5s infinite;
}在这个例子中，.float-element 是要应用悬浮特效的元素的类。@keyframes 规则定义了一个名为 floatUpDown 的动画，该动画在50%的时间点将元素向上移动10像素，然后在0%和100%的时间点元素回到原始位置。动画的持续时间是5秒，并且设置为无限次数循环（infinite）。
将这个类应用到HTML元素上：
<div class="float-element">我将上下悬浮</div>这段代码会使得这个div元素不停地上下摆动。可以通过调整@keyframes中的百分比和translateY的值来改变悬浮的强度和频率。
评论已关闭