往掘金“灌点水” | CSS 实现简单水波动画

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

前言

众所周知，掘金是一个技(摸)术(鱼)社区，我一直在沸点快乐的学(摸)习(鱼)，那么作为一个合格的沸人。不仅要掌握熟练的学(摸)习(鱼)技术，我们也要适当的往里面灌点水。

下面就像我们简单往掘金里灌点水吧--其实就是实现一个简单的水波动画特效

代码块

实现过程

1. 首先我们准备两个普通的文字 JueJin

  <div cLass="container">
    <h2> JueJin</h2>
    <h2> JueJin</h2>
  </div>

2. 然后我们设置一下，背景颜色和文字的样式，并将两个文字重叠到一起

    
.container {
    position: relative;
}

.container h2 {
    position: absolute;
    font-size: 8em;
    transform: translate(-50%, -50%);
}

3.然后我们分别对两个文字进行处理

• 第一个文字我们作为一个原始的图形进行完全展示，将字体变成透明并描边

• 第二个字体是我们实现水波纹动画的关键。我们使用clip-path对文字进行裁剪，并实现动画过度

.container h2:nth-child(2) {
    color: #03a9f4;
    animation: animate 4s ease-in-out infinite;
}

@keyframes animate {

    0%, 100% {
        clip-path: polygon(1% 65%, 32% 75%, 44% 75%, 69% 70%, 86% 62%, 97% 57%, 100% 54%, 108% 99%, 3% 100%, 1% 100%);
    }

    50% {
        clip-path: polygon(1% 73%, 24% 74%, 40% 74%, 66% 59%, 87% 50%, 97% 45%, 108% 43%, 100% 99%, 3% 100%, 1% 100%);
    }
}

最后，为了对比好看 我们将背景色设置成黑色的。

至此，我们就完成了简单的往掘金灌水-水波动画

结语

这是由一个非常非常不专业的后端混子完成的，仅供大家一乐~

希望大家都可以在掘金快乐的学习(摸鱼)~~