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%)
        }
    }
相关推荐
IT_陈寒2 小时前
Python 3.12 的这5个新特性,让我的代码性能提升了40%!
前端·人工智能·后端
方安乐2 小时前
vite+vue+js项目使用ts报错
前端·javascript·vue.js
韩立23332 小时前
Vue 3.5 升级指南
前端·vue.js
njsgcs2 小时前
网页连接摄像头
javascript·css·html
子兮曰2 小时前
🚀别再乱写package.json了!这些隐藏技巧让项目管理效率提升300%
前端·javascript·npm
我叫汪枫2 小时前
Spring Boot图片验证码功能实现详解 - 从零开始到完美运行
java·前端·javascript·css·算法·html
小桥风满袖3 小时前
极简三分钟ES6 - ES8中async,await
前端·javascript
一直在学习的小白~3 小时前
node_modules 明明写进 .gitignore,却还是被 push/commit 的情况
前端·javascript·vue.js
前端小超超4 小时前
如何配置capacitor 打包的ios app固定竖屏展示?
前端·ios·web app
nightunderblackcat4 小时前
新手向:从零理解LTP中文文本处理
前端·javascript·easyui