为什么访问外国网站速度慢,沈阳网站公司排名,网站介绍模板,网站设计基本步骤前面的话 本文将通过多种方式实现纹理文本的效果 背景裁切 对于实现纹理文本的效果#xff0c;脑海中最直接能想到的办法可能是背景裁切background-clip 使用线性渐变来填充文本背景 style.box-with-text { background-image: linear-gradient(135deg,hsl(50, 100%, 7…前面的话 本文将通过多种方式实现纹理文本的效果 背景裁切 对于实现纹理文本的效果脑海中最直接能想到的办法可能是背景裁切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 classbox-with-textmatch/div stylewidth: 100%; height: 120px; srchttps://demo.xiaohuochai.site/css/vein/v1.html frameborder0 width320 height240 下面使用一张枫叶的背景来制作纹理文本 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 classbox-with-textmatch/div stylewidth: 100%; height: 120px; srchttps://demo.xiaohuochai.site/css/vein/v2.html frameborder0 width320 height240 当然了放一张动态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 classbox-with-textmatch/div stylewidth: 100%; height: 120px; srchttps://demo.xiaohuochai.site/css/vein/v3.html frameborder0 width320 height240 如果想要让填充动起来可以通过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 classbox-with-textmatch/div stylewidth: 100%; height: 120px; srchttps://demo.xiaohuochai.site/css/vein/v4.html frameborder0 width320 height240 使用background-clip背景裁切的技术文本可以被选中。但是由于只有webkit内核的浏览器支持因此并不是跨浏览器的好方案 SVG 如果要对文本纹理做更精密的设置且考虑浏览器兼容性最好的方案还是使用SVG文本 首先可以通过SVG动画来实现文本纹理的动态效果 svg height100 xmlnshttp://www.w3.org/2000/svg idsvg
defs
style
.text{font:bolder 100px/100px Impact;}
/style
radialGradient idGradient1
animate attributeNamer values0%;150%;100%;0% dur5 repeatCountindefinite /
stop offset0% stop-color#fff
animate attributeNamestop-color values#333;#FFF;#FFF;#333 dur5 repeatCountindefinite /
/stop
stop offset100% stop-colorrgba(55,55,55,0)/
/radialGradient
/defs
text classtext dominant-baselinehanging y10 x0 fillurl(#Gradient1)match/text
/svg stylewidth: 100%; height: 120px; srchttps://demo.xiaohuochai.site/css/vein/v5.html frameborder0 width320 height240 使用SVG图案pattern可以实现更精细的纹理动画效果 svg height100 xmlnshttp://www.w3.org/2000/svg idsvg
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 idp-spots width0.12 height0.2
g classg-spots
circle r10 cx10 cy5 fill#3F0B1B stroke#3F0B1B /
circle r10 cx25 cy20 fill#CF423C stroke#CF423C/
/g
/pattern
/defs
text classtext dominant-baselinehanging y10 x0 strokeurl(#p-spots) fillnone stroke-width5 stroke-opacity0.5match/text
/svg stylewidth: 100%; height: 120px; srchttps://demo.xiaohuochai.site/css/vein/v6.html frameborder0 width320 height240 如果想实现虚线动画的效果则需要使用SVG文本的虚线描边 svg height100 xmlnshttp://www.w3.org/2000/svg idsvg
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 ids-text
text classtext dominant-baselinehanging y10 x0 match/text
/symbol
use xlink:href#s-text classuse-text/use
use xlink:href#s-text classuse-text/use
use xlink:href#s-text classuse-text/use
use xlink:href#s-text classuse-text/use
use xlink:href#s-text classuse-text/use
/svg stylewidth: 100%; height: 120px; srchttps://demo.xiaohuochai.site/css/vein/v7.html frameborder0 width320 height240 混合模式 使用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 classbox-with-textspan classtextmatch/span/div stylewidth: 100%; height: 120px; srchttps://demo.xiaohuochai.site/css/vein/v8.html frameborder0 width320 height240 关于背景为图片的效果就不再赘述和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 classbox
video classbox-with-text srchttp://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/sunshine.mp4 width280 height100 autoplay loop/video
div classbox-with-textmatch/div
/div stylewidth: 100%; height: 120px; srchttps://demo.xiaohuochai.site/css/vein/v9.html frameborder0 width320 height240 当然还可以是有声动画 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 classbox
video idvideo1 classbox-with-text srchttp://7xpdkf.com1.z0.glb.clouddn.com/mov.mp4 width320 height100 loop/video
div classbox-with-textmatch/div
/div
button onclick video1.play()播放/button
button onclick video1.pause()暂停/button stylewidth: 100%; height: 150px; srchttps://demo.xiaohuochai.site/css/vein/v10.html frameborder0 width320 height240 虽然混合模式有更大的自由度但是由于其是CSS3的属性IE浏览器、android4.4-不支持safari和IOS需要添加-webkit-前缀。浏览器兼容性并不是很好 更多专业前端知识请上
【猿2048】www.mk2048.com
