css 实现加载效果

CSS可以通过实现加载效果来丰富我们的页面展现，同时也可以提高用户体验。下面是几种CSS实现加载效果的方法：

.loader {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

上述代码实现了一个加载效果，简单解释一下：

1. 首先定义一个class为loader的元素，设置其属性值。这里border、width、height、border-radius等属性值可以根据个人需要来设置。

2. 接着使用animation属性，指定动画名称spin、执行时间2秒、线性变化以及无限循环。

3. 最后在keyframes中定义旋转的角度，从0度到360度旋转。

除此之外，CSS还可以通过背景动画、渐变过渡、缩放效果等方式实现多种加载效果，这里只是举了一个例子。当然，与JavaScript相比，CSS实现的动画效果会更加流畅，而且保持动画的帧率稳定，无论在移动设备还是桌面端都有良好的表现。