CSS水波纹特效

xml 复制代码
    <div class="mask">
        <div class="word">Loading...</div>
        <div class="word">Loading...</div>
    </div>
css 复制代码
    .mask {
        position: relative;
        height: 100vh;
        background-color: #000;
        .word {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 80px;
            &:nth-child(1) {
                color: transparent;
                -webkit-text-stroke: 2px #03a9f4;
            }
            &:nth-child(2) {
                color: #03a9f4;
                animation: water 2s ease-in-out infinite alternate;
            }
        }
    }
    @keyframes water {
        0% {
            clip-path: polygon(31% 61%, 53% 65%, 77% 67%, 100% 68%, 100% 100%, 0% 100%, 0% 35%, 13% 52%)
        }
        100% {
            clip-path: polygon(51% 68%, 71% 59%, 86% 44%, 100% 24%, 100% 100%, 0% 100%, 0% 72%, 28% 71%)
        }
    }
相关推荐
尘世中一位迷途小书童几秒前
2025年了,你还在用传统的多仓库管理吗?Monorepo 架构深度解析
前端·架构
fruge3 分钟前
前端性能优化实践指南:从理论到落地
前端·性能优化
快起来别睡了7 分钟前
用这 9 个 API,我把页面性能干到了 90+
前端
芒果茶叶19 分钟前
深入浅出requestAnimationFrame
前端·javascript·html
歪歪10021 分钟前
在哪些场景下适合使用 v-model 机制?
服务器·前端·javascript·servlet·前端框架·js
亲爱的马哥23 分钟前
再见,TDuckX3.0 结束了
前端·后端·github
KrystalMeiling36 分钟前
讲解react的useEffect用法,被监听字段的注意事项
前端
渣哥40 分钟前
Spring 创建 Bean 的多种方式对比与最佳实践
前端·javascript·面试
Copper peas44 分钟前
axios使用过程
前端·javascript·vue.js
云鹤_1 小时前
【Amis源码阅读】如何将json配置渲染成页面?
前端·低代码