css幽灵上下浮动动画

CSS动画一直是Web开发人员关注的热点。近年来幽灵上下浮动动画受到越来越多的关注，成为Web设计中不可或缺的一部分。

/* 定义动画 */
@keyframes floating{
    from { transform: translate(0,0px); }
    50%  { transform: translate(0,15px); }
    to   { transform: translate(0,-0px); }
}

/* 应用动画 */
.floating-element{
    animation: floating 2s ease-in-out infinite;
}

如上代码片段是实现幽灵上下浮动动画的关键所在。首先，我们通过@keyframes定义了动画的具体实现，包括起始状态from和结束状态to。然后，在应用该动画的元素上设置相应的CSS属性，即可完成幽灵上下浮动的动画效果。

需要注意的是，关键帧（即@keyframes）中的50%是可调整的，可以根据需要进行适当调整以实现更加自然流畅的动画效果。

此外，这个动画效果也适用于多个元素，只需为每个元素添加相应的class即可。值得一提的是，该动画效果还可以应用在Icon、Button等元素上，让你的页面更加生动有趣。

总之，幽灵上下浮动动画是Web设计中常用的动画效果之一，能够为你的页面增添更多的互动性和趣味性。它简单易用，且能够充分展示网页的美感和动态效果。所以，赶紧尝试一下吧！