css3实现水纹进度条

其实有一个mask-image属性 挺有意思,在元素上面实现遮罩层的效果,不过这玩意有些兼容性问题 需要处理,所以单纯可以通过渐变色的方式来实现 同时加上动画效果

css 复制代码
 .jianbian {
            width: 100%;
            height: 16px;
            background-color: #eee;
            display: flex;
            border-radius: 16px;


        }
       .progress {
            height: 100%;
            width: 60%;
            background-image: linear-gradient(270deg, #ff3905 10%, #ff814f 100%);
            border-radius: 16px;
            display: flex;

        }
        .mask {
            height: 100%;
            width: 100%;
            background-image: linear-gradient(45deg,
                    rgba(255, 255, 255, 0.3) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, 0.3) 50%,
                    rgba(255, 255, 255, 0.3) 75%,
                    transparent 75%,
                    transparent);
            background-size: 20px 20px;
            animation: stripe 1s linear infinite;

        }
        @keyframes stripe {
            from {
                background-position: 0 0;
            }

            to {
                background-position: 20px 0;
            }
        }

html结构

html 复制代码
 <div class="jianbian">
        <div class="progress">
            <div class="mask"></div>
        </div>
    </div>

pdf制作有点麻烦 搞了个截图

距离1024 还差一百多篇吧 加油

相关推荐
Java水解5 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户38022585982426 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo5210028 分钟前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员34 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
山有木兮木有枝_36 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子37 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a41 分钟前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心41 分钟前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq43 分钟前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端
长路 ㅤ   1 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术