用clip-path实现一个水波纹的字体

1.实现效果

GIF111.gif

2.实现步骤

2.1.写一个h2标签

苏苏

2.3.设置字体镂空

body {
    margin: 0;
    padding: 0;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: #222;
    min-width: 1200px;
}

h2 {
    color: #fff;
    font-size: 8em;
    color: transparent;
    -webkit-text-stroke: 2px #00ffff;
    position: relative;
}

如下图效果：

在这里插入图片描述

2.3text-stroke属性

使用text-stroke文字的描边属性，color: transparent，实现字体镂空的效果。

text-stroke是： text-stroke-width和text-stroke-color两个属性的简写写法。

text-stroke-width ：设置或检索对象中的文字的描边厚度
text-stroke-color ：设置或检索对象中的文字的描边颜色

2.4 h2添加一个相同文字的伪元素

h2::before {
    content: attr(content);
    position: absolute;
    top: 0;
    left: 0;
    color: #00ffff;
    animation: a 4s ease-in-out infinite;
}

content设置伪元素的内容，结合attr属性获取元素属性内容。

为其设置一个动画效果

@keyframes a {

    0%,
    100% {
        -webkit-clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);
        clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);

    }

    50% {
        -webkit-clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
        clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
    }
}

2.5clip-path

clip-path创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
clip-path的属性值可以是以下几种：

在这里插入图片描述

这里用到的就是多变形，推荐一个clip-path在线网站，快速帮助我们绘画出想要的形状。
clip-path在线生成网站

在这里插入图片描述

3.完整代码：

    
        
        
    
    
    
        
苏苏
    

4.在线预览

苏苏的codepen