[分享]css充值中等待点点点

你是否曾经在进行CSS充值时，看到了那个不断闪烁的“点点点”，等待无比漫长？这其实是一种等待（Loading）效果，可以通过CSS样式来实现。我们可以使用HTML结构来实现这一效果： 其中，...

你是否曾经在进行CSS充值时，看到了那个不断闪烁的“点点点”，等待无比漫长？这其实是一种等待（Loading）效果，可以通过CSS样式来实现。

我们可以使用HTML结构来实现这一效果：

 <div class="loader">
        <div class="dot1"></div>
        <div class="dot2"></div>
        <div class="dot3"></div>
    </div> 

其中，class属性对应的CSS样式如下：

 .loader {
        display: inline-block;
        position: relative;
        width: 40px;
        height: 40px;
    }

    .dot1, .dot2, .dot3 {
        position: absolute;
        top: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #333;
        animation: dot 0.6s infinite ease-in-out;
    }

    .dot2 {
        left: 15px;
    }

    .dot3 {
        left: 30px;
    }

    @keyframes dot {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1);
        }
        100% {
            transform: scale(0);
        }
    } 

实现原理为：通过position属性将三个小圆点固定在父元素内的位置，使用animation属性添加动画效果，完成点点点的闪烁效果。

当然，如果你想要更多样式的“点点点”效果，也可以通过CSS样式自行实现。例如：改变大小、颜色、速度等等。

无论如何，使用CSS实现“点点点”等待效果，都可以为页面增添不少美观与舒适的用户体验。