css3浮动的星球

在CSS3中，有一种很酷炫的浮动效果，可以让元素像漂浮在空中的星球一样，在页面中飘荡。

.star {
    width: 100px;
    height: 100px;
    background-color: #FFF;
    border-radius: 50%;
    position: fixed;
    z-index: -1;
    animation-name: float;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes float {
0% {
    transform: translateY(0);
}
50% {
    transform: translateY(-150px);
}
100% {
    transform: translateY(0);
}
}
    

上述代码中，我们使用了position: fixed将星球固定在页面中，z-index: -1将其放在其他元素的下面，animation-name定义了动画的名称为float，animation-duration定义了动画的持续时间为5秒，animation-timing-function定义了动画的时间函数为ease-in-out，这样动画会有一个渐进的加速和减速效果，animation-iteration-count定义了动画的循环次数为无限次。

而在@keyframes中定义了动画的具体实现过程，0%表示动画开始时元素的状态，50%表示动画进行到一半时元素的状态，100%表示动画结束时元素的状态。在这个例子中，我们通过transform: translateY()来使元素在竖直方向上移动。

通过上述代码，我们就可以实现一个漂浮在页面中的炫酷星球效果了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！