使用css实现动态loading

效果图

关键样式 - 遮罩mask

www.w3school.com.cn/css/css3_ma...

图片素材

【注】需要透明底色的文字图片

完整代码

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>loading</title>
    <style lang="scss" scoped>
        * {
            padding: 0;
            margin: 0;
        }

        .a-loading {
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .content {
            position: absolute;
            padding: 0 20px;
            border-radius: 20px;
            background-color: #dad8d554;

        }

        .content-loading {
            max-width: 420px;
            min-width: 300px;
            width: 100%;
            height: 90px;
            background: linear-gradient(to right, #ffffff, #d94c4c);
            background-size: 200%;
            animation: translationX 2s linear infinite;
            /* mask-size: 100%; */
            mask-repeat: no-repeat;
            mask-position: center;
            mask-image: url("/images/loading1.png");
        }

        @keyframes translationX {
            0% {
                background-position: 200% 200%;
            }

            100% {
                background-position: 0 0;
            }
        }
    </style>
</head>

<body>
    <div class="a-loading">
        <div class="content">
            <div class="content-loading"> </div>
        </div>
    </div>
</body>

</html>
相关推荐
遇到困难睡大觉哈哈12 分钟前
CSS中的Element语法
前端·css
Real_man19 分钟前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中19 分钟前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术21 分钟前
日历插件-FullCalendar的详细使用
前端·javascript
咔咔一顿操作24 分钟前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
LuckyLay2 小时前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust
pobu1682 小时前
aksk前端签名实现
java·前端·javascript
烛阴2 小时前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw02 小时前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦2 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js