纯CSS使用animation实现Loading效果

最新推荐文章于 2024-06-25 10:37:03 发布

我要手撕源码

最新推荐文章于 2024-06-25 10:37:03 发布

阅读量443

点赞数 4

分类专栏： # CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_48171371/article/details/120168847

版权

本文介绍了如何使用纯CSS来创建Loading效果。通过HTML结构和CSS样式，详细讲解了如何居中显示五个圆，实现波纹效果，改变背景颜色以及设置动画延迟，从而达到逐个启动和结束的效果。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

代码实现

HTML

为5个div添加样式后就可以得到5个圆

    <div class="container">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
    </div>

CSS

居中

*{
   
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body{
   
   width: 100%;
   height: 100vh;
   background-color: #222;
   display: flex;
   justify-content:center;
   align-items: center;
}
.container{
   
   display: flex;
}