前面的話

　　本文將通過多種方式實現紋理文本的效果

?

背景裁切

　　對于實現紋理文本的效果，腦海中最直接能想到的辦法可能是背景裁切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>　　

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

　　雖然混合模式有更大的自由度，但是由于其是CSS3的屬性，IE瀏覽器、android4.4-不支持，safari和IOS需要添加-webkit-前綴。瀏覽器兼容性并不是很好

　　

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的纹理文本的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。