css3-loading效果

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

github_34514750

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

阅读量712

点赞数 1

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

本文链接：https://blog.csdn.net/github_34514750/article/details/51866794

版权

本文介绍了如何使用CSS3创建一个五圆圈的loading效果。首先，设置父容器为绝对定位并使其居中；接着，创建五个带有border-radius的div，让它们排列成一行；最后，通过给每个子元素添加缩放动画和延迟，实现了依次加载的视觉效果。详细代码和示例可在GitHub找到。

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

5个圆圈loading图
这里写图片描述

1.父容器container

绝对定位父元素在屏幕中间

2.子元素div

画出五个div,设置border-radius，然后内联变成一行

3.子元素div动画

每个子元素放大缩小，但是依次给个动画延迟，则是很好的loading效果

https://github.com/wanghuanweb/wanghuan.github.io/tree/master/css/css3%E5%8A%A8%E7%94%BB%E8%AE%BE%E8%AE%A1/css3%20loading%E5%9B%BE

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <link href="index.css" rel="stylesheet">
    </head>

    <body>
        <div class="container">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <

最低0.47元/天解锁文章

github_34514750

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-loading效果

5个圆圈loading图 1.父容器container绝对定位父元素在屏幕中间2.子元素div画出五个div,设置border-radius，然后内联变成一行3.子元素div动画每个子元素放大缩小，但是依次给个动画延迟，则是很好的loading效果https://github.com/wanghuanweb/wanghuan.github.io/tree/master/css/css3%E5%8A
复制链接

扫一扫

专栏目录