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%)
        }
    }
相关推荐
namekong81 天前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天1 天前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄1 天前
HTML 表单控件
前端·microsoft·html
学习笔记1011 天前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19431 天前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧1 天前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台1 天前
海龟交易系统R
前端·人工智能·r语言
歪歪1001 天前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc1 天前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
繁花与尘埃1 天前
CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习