css+svg实现文字与背景filter反差变色海报效果代码
代码语言:html
所属分类:布局界面
代码描述:css+svg实现文字与背景filter反差变色海报效果代码
代码标签: css svg 文字 背景 filter 反差 变色 海报
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Geologica:wght@900&display=swap"); html, body, div { display: grid; } html { min-height: 100%; } body { background: #212121; font: 900 clamp(3em, 16vh, 20em) geologica, sans-serif; } svg[width="0"][height="0"] { position: fixed; } div { --w: min(100%, 4em); box-sizing: border-box; place-self: center; padding-top: calc(.5*var(--w)); width: var(--w); aspect-ratio: 2/3; background: #000; color: #00f; -webkit-text-stroke: 2px rgb(100%, 0%, 0%, var(--a)); text-transform: uppercase; text-align: center; filter: url(#text) drop-shadow(2px 2px 5px #000c); } </style> </head> <body translate="no"> <svg width="0" height="0" aria-hidden="true"> <filter id="text" color-interpolation-filters="sRGB" x="0" y="0" width="100%" height="100%"> <feImage href="//repo.bfw.wiki/bfwrepo/image/66190a3a7494c.png" result="back"></feImage> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0