svg+css filter布局实现的文字效果代码
代码语言:html
所属分类:布局界面
代码描述:svg+css filter布局实现的文字效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Courgette&display=swap"); html, body { display: grid; } html { min-height: 100%; } body { margin: 0; } body::before { grid-area: 1/1; background: linear-gradient(#f00 4px, #0000 0) 0/1% 1em, radial-gradient(circle closest-side, #0f0, #000); background-blend-mode: lighten; filter: url(#back); content: ""; } svg[height="0"] { position: fixed; } div { grid-area: 1/1; place-self: center; position: relative; padding: 0 0.25em; color: #00f; -webkit-text-stroke: 0.05em #f00; paint-order: stroke fill; font: 700 3em/1.625 courgette, cursive; font-size: clamp(3em, 30vmin, 25em); text-align: center; text-transform: capitalize; isolation: isolate; filter: url(#extruded); } div::after { position: absolute; inset: 0; background: linear-gradient(#000, #0f0) 0 0/1% 1lh; mix-blend-mode: lighten; pointer-events: none; content: ""; } </style> </head> <body translate="no"> <svg width="0" height="0"> <filter id="back" color-interpolation-filters="sRGB"> <feTurbulence baseFrequency=".0371 .0713" result="one"></feTurbulence> <feTurbulence baseFrequency=".173 .317"></feTurbulence> <feDisplacementMap in="one" scale="25" xChannelSelector="R"></feDisplacementMap> <feDiffuseLighting lighting-color="#4a7997" result="textured"> <feDistantLight azimuth="90" elevation="50"></feDistantLight> </feDiffuseLighting> <feColorMatrix in="SourceGraphic" values="0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 1 0 0 0 0" result="baseline"></feColorMatrix> <feComposite in="textured" operator="in"></feComposite> <feDropShadow dx="0" dy="2"></feDropShadow> <feBlend in2="textured" result="textline"></feBlend> <feGaussianBlur in="baseline" stdDeviation="1"></feGaussianBlur> <feOffset dy="1"></feOffset> <feComposite in="baseline" operator="out"></feComposite> <feBlend in2="textline" mode="screen" result="stripe"></feBlend> <feColorMatrix in="SourceGraphic" values="0 0 0 0 .5 0 0 0 0 .85 0 0 0 0 .95 0 1 0 0 0"></feColorMatrix> <feBlend in2="stripe" mode="overlay"></feBlend> </filter> <filter id="extruded" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%"> <feColorMatrix values="0 0 0 0 .01 0 0 0 0 .085 0 0 0 0 .14 0 1 0 0 0" result="basegrad"></feColorMatrix> <feTurbulence type="fractalNoise" baseFrequency=".5713"></feTurbulence> <feDisplacementMap in="basegrad" scale="64" xChannelSelector="R" result="mixtgrad".........完整代码请登录后点击上方下载按钮下载查看
网友评论0