纹理文本

前面的话

　　本文将通过多种方式实现纹理文本的效果

背景裁切

　　对于实现纹理文本的效果，脑海中最直接能想到的办法可能是背景裁切background-clip

　　使用线性渐变来填充文本背景

<style>
.box-with-text { background-image: linear-gradient(135deg,hsl(50, 100%, 70%), hsl(320, 100%, 50%)); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-size: cover;font:bolder 100px/100px Impact;position:absolute;}
</style>
<div class="box-with-text">match</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/vein/v1.html" frameborder="0" width="320" height="240">

　　下面使用一张枫叶的背景，来制作纹理文本

<style>
.box-with-text { background-image: url(http://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/leaf.jpg); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-size: cover;font:bolder 100px/100px Impact;position:absolute;}
</style>
<div class="box-with-text">match</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/vein/v2.html" frameborder="0" width="320" height="240">

　　当然了，放一张动态gif图，也是没问题的

<style>
.box-with-text { background: url(http://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/fire.gif) 0 -130px /cover; -webkit-text-fill-color: transparent; -webkit-background-clip: text; font:bolder 100px/100px Impact;position:absolute;}
</style>
<div class="box-with-text">match</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/vein/v3.html" frameborder="0" width="320" height="240">

　　如果想要让填充动起来，可以通过animation移动背景的位置和尺寸来添加动画

<style>
@keyframes stripes {100% {background-position: 0 -50px;}}
.box-with-text {animation: stripes 2s linear infinite;background:linear-gradient(crimson 50%, #aaa 50%) 0 0/ 100% 50px ; -webkit-text-fill-color: transparent; -webkit-background-clip: text; font:bolder 100px/100px Impact;position:absolute;}
</style>
<div class="box-with-text">match</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/vein/v4.html" frameborder="0" width="320" height="240">

　　使用background-clip背景裁切的技术，文本可以被选中。但是，由于只有webkit内核的浏览器支持，因此并不是跨浏览器的好方案

SVG

　　如果要对文本纹理做更精密的设置，且考虑浏览器兼容性，最好的方案还是使用SVG文本

　　首先，可以通过SVG动画，来实现文本纹理的动态效果

<svg height="100" xmlns="http://www.w3.org/2000/svg" id="svg">
<defs>
<style>
.text{font:bolder 100px/100px Impact;} 
</style>  
<radialGradient id="Gradient1">
<animate attributeName="r" values="0%;150%;100%;0%" dur="5" repeatCount="indefinite" />
<stop offset="0%" stop-color="#fff">
<animate attributeName="stop-color" values="#333;#FFF;#FFF;#333" dur="5" repeatCount="indefinite" />
</stop>
<stop offset="100%" stop-color="rgba(55,55,55,0)"/>
</radialGradient>
</defs>  
<text class="text" dominant-baseline="hanging" y="10" x="0" fill="url(#Gradient1)">match</text>
</svg>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/vein/v5.html" frameborder="0" width="320" height="240">

　　使用SVG图案pattern，可以实现更精细的纹理动画效果

<svg height="100" xmlns="http://www.w3.org/2000/svg" id="svg">
<defs>
<style>
.text{font:bolder 100px/100px Impact;}   
@keyframes stroke {
50% {
stroke-width:30;
stroke-opacity: .5;
}
} 
.g-spots circle{stroke-width: 0;animation: stroke 2s infinite;}
.g-spots circle:nth-child(1) {animation-delay: -0.4s;}
.g-spots circle:nth-child(2) {animation-delay: -1.2s;}
</style>  
<pattern id="p-spots" width="0.12" height="0.2">
<g class="g-spots">
<circle r="10" cx="10" cy="5" fill="#3F0B1B" stroke="#3F0B1B" />
<circle r="10" cx="25" cy="20" fill="#CF423C" stroke="#CF423C"/> 
</g>
</pattern>
</defs>  
<text class="text" dominant-baseline="hanging" y="10" x="0" stroke="url(#p-spots)" fill="none" stroke-width="5" stroke-opacity="0.5">match</text>
</svg>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/vein/v6.html" frameborder="0" width="320" height="240">

　　如果想实现虚线动画的效果，则需要使用SVG文本的虚线描边

<svg height="100" xmlns="http://www.w3.org/2000/svg" id="svg">
<defs>
<style>
@keyframes stroke {100% { stroke-dashoffset: -400;}}    
.text{font:bolder 100px/100px Impact;} 
.use-text{fill: none;stroke-width: 6;stroke-dasharray: 70 330;stroke-dashoffset: 0;animation: stroke 6s infinite linear;}
.use-text:nth-child(5n 1){stroke: pink;animation-delay: -1.2s;}
.use-text:nth-child(5n 2){stroke: lightblue;animation-delay: -2.4s;}
.use-text:nth-child(5n 3){stroke: lightgreen;animation-delay: -3.6s;}
.use-text:nth-child(5n 4){stroke: orange;animation-delay: -4.8s;}
.use-text:nth-child(5n 5){stroke: tan;animation-delay: -6s;}
</style>  
</defs>  
<symbol id="s-text">
<text class="text" dominant-baseline="hanging" y="10" x="0" >match</text>
</symbol>  
<use xlink:href="#s-text" class="use-text"></use>
<use xlink:href="#s-text" class="use-text"></use>
<use xlink:href="#s-text" class="use-text"></use>
<use xlink:href="#s-text" class="use-text"></use>
<use xlink:href="#s-text" class="use-text"></use>  
</svg>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/vein/v7.html" frameborder="0" width="320" height="240">

混合模式

　　使用CSS3的新属性混合模式中的元素混合mix-blend-mode属性也可以实现类似的效果。元素混合mix-blend-mode应用于两个元素之间的混合，这时就需要将文字和纹理效果分开为两个元素

<style>
.box-with-text { background-image: linear-gradient(135deg,hsl(50, 100%, 70%), hsl(320, 100%, 50%)); background-size: cover;font:bolder 100px/100px Impact;position:absolute;}
.text{mix-blend-mode: lighten; background:white;}
</style>
<div class="box-with-text"><span class="text">match</span></div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/vein/v8.html" frameborder="0" width="320" height="240">

　　关于背景为图片的效果就不再赘述，和backgroung-clip方法类似

　　但是，由于它是两个元素的混合，而不仅仅是应用背景样式。因此，其甚至可以将视频作为纹理

<style>
.box{position:relative;height:100px;overflow: hidden;}
.box-with-text { mix-blend-mode: lighten; background:white;font:bolder 100px/100px Impact;position:absolute;height: 200px;width: 280px;}
</style>
<div class="box">
<video class="box-with-text" src="http://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/sunshine.mp4" width="280" height="100" autoplay loop></video>
<div class="box-with-text">match</div>  
</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/vein/v9.html" frameborder="0" width="320" height="240">

　　当然，还可以是有声动画

<style>
.box{position:relative;height:100px;overflow: hidden;}
.box-with-text { mix-blend-mode: lighten; background:white;font:bolder 100px/100px Impact;position:absolute;height: 176px;width: 320px;}
</style>
<div class="box">
<video id="video1" class="box-with-text" src="http://7xpdkf.com1.z0.glb.clouddn.com/mov.mp4" width="320" height="100" loop></video>
<div class="box-with-text">match</div>  
</div>
<button onclick = 'video1.play()'>播放</button>
<button onclick = 'video1.pause()'>暂停</button>