字体水波纹效果

---

前言

弱弱菜鸡，第一篇博客

1.HTML代码

代码如下（示例）：

 <h2>优C</h2>
 <h2>优C</h2>

2.css代码

代码如下（示例）：

*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
h2{
    font-size: 6em;
    position: absolute;
}
h2:nth-child(1){
    -webkit-text-stroke-color: #1254e4;
    -webkit-text-stroke-width: 2px;
    color: transparent;
}
h2:nth-child(2){
    color: #1254e4;
    animation: bowen 3s ease-in-out infinite;/*低速结束与开始 无限次播放*/
}
@keyframes bowen {
    0%,100%{
       clip-path: polygon(0% 59%,15% 50%,35% 50%,46% 62%,65% 69%,88% 69%,97% 61%,99% 100%,0% 100%)
    }
    50%{
        clip-path: polygon(0% 59%,18% 71%,34% 74%,51% 64%,65% 52%,83% 50%,97% 61%,99% 100%,0% 100%);
    }
}

效果

总结

text-stroke描边属性，全部采用-webkit-私有前缀，所有其他非WebKit的浏览器厂商都支持了-webkit-前缀，和border不同，无法指定描边的类型，只能是描线实边，和border属性不同的另一个地方，border-width默认值是medium，最终表现为3px
但是text-stroke-width默认值是0，那么我们在使用text-stroke属性时，描边宽度必须要加上
代码如下（示例）：

.stroke {
  -webkit-text-stroke: 2px red;
}

等同于
代码如下（示例）：

.stroke {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: red;
}

其中还有一个clip-path专门用来定义剪裁路径的，而其中polygon是用来剪裁多边形路径的
circle是圆形，ellipse是椭圆形，inset矩形
可以使用transition过渡和animation动画
polygon的作用就是根据二维点坐标依次连线，polygon对点的数目没有限制
起点是从左上角开始算的，可是使用%也可以使用px
如图所示

polygon动画变形的重要条件就是坐标的数目变形前后必须一致，只有坐标的数目在动画的前后数目一样，才能实现连续动画

疑惑

text-stroke是居中描边，按理来说是这样

但我的确实这样

第一篇博客，如有错误，敬请指教，弱弱菜鸡，不知所言