HTML+CSS(上传中 /上传中)

最新推荐文章于 2023-08-18 11:09:29 发布

Cwiyc

最新推荐文章于 2023-08-18 11:09:29 发布

阅读量984

点赞数 1

分类专栏： HTML+CSS 文章标签： css3 animation html

本文链接：https://blog.csdn.net/wcvison/article/details/114649933

版权

HTML+CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML+CSS （上传中 /上传中）动画

核心思想是使用两个伪元素组成按钮的水波纹，再使用动画无限循环
- 伪元素是一个圆，只有边框

核心思想是使用两个伪元素组成按钮的水波纹，再使用动画无限循环

伪元素是一个圆，只有边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传中动画</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            display:flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(71, 153, 230);
            border-radius: 50%;
            margin:300px auto;
            color: white;
        }
        .box1::before{
            content: '';/*内容为空*/
            display: block;/*转换成块元素*/
            position: absolute;/*开启绝对定位定位*/
            width: 100px;
            height: 100px;
            border-radius:50%;/*使方块变圆*/
            border:solid 1px rgba(71, 153, 230,.2);
            animation: loading 2s infinite;
        }
        .box1::after{
            content: '';
            display: block;
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius:50%;
            border:solid 1px rgba(71, 153, 230,.1);
            animation: loading 2s infinite .7s;/*第二个圈圈延迟0.7秒后出现*/
        }
        @keyframes loading {
            to{
                transform: scale(1.4);/*放大1.4倍*/
            }
        }
    </style>
</head>
<body>
    <div class="box1">变丑中</div>
</body>
</html>

实现起来比较简单，试试吧！！！

Cwiyc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS(上传中 /上传中)

HTML+CSS （上传中 /上传中）动画核心思想是使用两个伪元素组成按钮的水波纹，再使用动画无限循环伪元素是一个圆，只有边框核心思想是使用两个伪元素组成按钮的水波纹，再使用动画无限循环伪元素是一个圆，只有边框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid
复制链接

扫一扫