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 还差一百多篇吧 加油

相关推荐
江号软件分享38 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
Liudef067 小时前
儿童趣味记忆配对游戏
css·游戏·css3
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架