CSS 的loading特效

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

田野的嘴好冰

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

阅读量512

点赞数

分类专栏： css css3 文章标签： loading

本文链接：https://blog.csdn.net/baidu_35377957/article/details/79599877

版权

本文介绍了如何不依赖框架，自定义创建CSS loading效果。分别展示了通过span元素和伪元素来实现不同样式的loading动画，提供了HTML结构和CSS代码示例。

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

之前做loading效果都是用的框架自带的，上周正好碰到需要，自己查了下资料，自己写了几个例子。

HTML的结构无非两种，第一自己写span结构；第二用伪元素模拟结构。

第一种：html结构

<div id="preloader_1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

css

#preloader_1{
            position: relative;
            left:50%;
            width:45px;
            height:30px;
        }
        #preloader_1 span{
            display: block;
            width:9px;
            height:5px;
            position: absolute;
            bottom:0;
            background: yellow;
            animation: preloader_1 1.5s infinite ease-in-out;
        }
        #preloader_1 span:nth-child(2){
            left:11px;
            animation-delay: .2s;
        }
        #preloader_1 span:nth-chi