作为一个取名废，也不知道是不是该如标题这么描述本文提及的这个效果...
最近看到一个效果挺酷炫的，效果如下：
我是萌萌哒 文字特效
SixSixSix呀，于是研究了一下，暂时找到了两种实现方法：
1. 结合使用<svg>与<video>的实现
以上面的视频为例，我们可以创建一个<video>标签，然后让视频在其中播放。
然后利用<svg>里面的<clipPath>标签与CSS3提供的clip-path属性实现这一效果。
示例代码如下:
<!-- HTML -->
<div class="wrapper">
<span class="span-content">
{{content}}
</span>
<span class="video-wrapper">
<video muted playsinline preload="auto"
autoplay="autoplay" loop="loop"
src="../assets/gradient.mp4">
</video>
</span>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 240"
aria-hidden="true">
<defs>
<clipPath id="content-mask" >
<text x="0" y="100" font-weight="600" >
{{content}}</text>
</clipPath>
</defs>
</svg>
</div>
<!-- CSS -->
.wrapper{
position: relative;
z-index: 1;
display: inline-block;/*
padding-bottom: 0.1em;
padding-right: 0.1em;
margin-right: -0.1em;*/
white-space: nowrap;
color: rgb(255, 255, 255);
background: transparent;
}
.wrapper span.span-content{
color: transparent;
pointer-events: none;
user-select: none;
font-weight: 600;
}
.wrapper .video-wrapper{
opacity: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
user-select: none;
display: inline-block;
z-index: 2;
}
.wrapper .video-wrapper video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
user-select: none;
object-fit: cover;
object-position: center center;
clip-path: url(#content-mask);
}
.wrapper svg{
position: absolute;
top: -2%;
left: -2%;
width: 104%;
height: 104%;
<!-- 这部分为了针对某些浏览器会出现没有完全盖住video的问题，
如果使用100%的话，有些情况下底部的video会露出来。-->
pointer-events: none;
z-index: 4;
opacity: 0;
}
这个方法是我第一个找到的，但是它存在一些问题。
首先便是<svg>中的<text>标签的问题，可能由于在SVG上我完全是个菜鸡8，用这种方法去实现的动效文字与句子中其他文字的对齐要靠人手hard code...比如x,y,textLength这些属性，都需要根据实际慢慢去调整。
这带来了一个问题，就是如果应用在响应式布局上，文字大小会发生变化的时候，我们的动效文字会走形...这个问题我还不知道怎么样去解决，希望走过路过的朋友不吝赐教。
2. 把视频转成gif后在CSS中应用属性-webkit-text-fill-color
Talk is cheap, show you the code:
<!-- HTML -->
<span class = "animate-text">{{ content }} </span>
<!-- CSS -->
<style >
.animate-text{
background: url(../assets/gradient.gif) no-repeat center center;
background-size: cover;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
}
</style>
相比起来这个方法就简单很多了，主要的精华就是-webkit-background-clip以及-webkit-text-fill-color。
有一点点麻烦的就是，如果想要应用动效的是一个视频，还得转成gif，而在这过程中，视频可能会失真。
