css+svg filter实现逼真雪块文字效果代码
代码语言:html
所属分类:布局界面
代码描述:css+svg filter实现逼真雪块文字效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Titan+One&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: grid; place-items: center; text-align: center; } body { font-size: 12vmin; font-weight: 900; color: white; font-family: "Titan One", cursive; line-height: 1; filter: url(#snowtext); text-transform: uppercase; } body::after { pointer-events: none; content: ""; position: fixed; inset: 0; background-color: rgb(0 0 125 / 0.1); background-image: url(//repo.bfw.wiki/bfwrepo/icon/638ffc15de137.png); } svg { position: fixed; width: 0; height: 0; opacity: 0; } </style> </head> <body > <h1 contenteditable="true">LET IT<br>SNOW</h1> <svg> <filter id="snowtext"> <!-- highlight --> <feOffset in="SourceAlpha" dx="0.333" dy="1.667" result="0"></feOffset> <feGaussianBlur stdDeviation="10" in="0" result="1"></feGaussianBlur> <feSpecularLighting surfaceScale="10" specularConstant="0.8" specularExponent="15" in="1" result="2"> <fePointLight x="0" y="-10000" z="300"></fePointLight> </feSpecularLighting> <feComposite in="2" in2="SourceAlpha" operator="in" result="3"></feComposite> <!-- shadow --> <feOffset in="SourceAlpha" dx="-0.333" dy.........完整代码请登录后点击上方下载按钮下载查看
网友评论0