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%)
        }
    }
相关推荐
慧一居士15 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead17 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app