css实现一个炫酷动画loading

在CSS中，我们可以使用关键帧动画（keyframes）和动画（animations）属性来创建炫酷的加载动画。以下是一个简单的示例，演示如何使用CSS创建一个炫酷的加载动画效果：

/* 定义关键帧 */
@keyframes loading-animation {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}
 
/* 应用动画 */
.loading-animation {
    width: 50px;
    height: 50px;
    background-color: #333;
    border-radius: 50%;
    margin: 50px auto;
    animation: loading-animation 1s infinite alternate;
}

在这个示例中，.loading-animation 类定义了一个圆形的加载动画，并通过animation属性应用了名为loading-animation的关键帧动画。动画从元素的0.8倍大小开始，逐渐放大到1.5倍大小，然后逐渐消失。动画的持续时间是1秒，并且设置为无限次数循环（infinite），每次动画结束都会反向播放（alternate）。

你可以将这个类添加到HTML元素中来展示这个炫酷的加载动画：

<div class="loading-animation"></div>

这个示例展示了如何使用CSS关键帧和动画属性创建简单而又引人注意的加载动画。你可以根据需要调整颜色、大小和其他属性，以及动画的具体细节。