css+svg布局实现文本发光效果代码
代码语言:html
所属分类:布局界面
代码描述:css+svg布局实现文本发光效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); *{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;} html, body { height: 100%; overflow: hidden;} body { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; font-family: Poppins; background: #000; font-size: calc(var(--_size) * 0.022); --_factor: min(1000px, 100vh); --_size: min(var(--_factor), 100vw); } svg.filters { display: none; } .header-text { color: #c8c2bd; font-size: 3em; text-align: center; line-height: 1.0625; font-weight: 600; letter-spacing: -0.009em; } .glow-filter{ position: relative; display: inline-block; scale: 1; animation: onloadscale 1s ease-out forwards; } .glow-filter::before{ content: attr(data-text); position: absolute; pointer-events: none; color: #fffaf6; background: linear-gradient(0deg, #dfe5ee 0%, #fffaf6 50%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: url(#glow-4); opacity: 0; animation: onloadopacity 1s ease-out forwards; } @keyframes onloadscale { 24% { scale: 1; } 100% { scale: 1.02; } } @keyframes onloadopacity { 24% { opacity: 0; } 100% { opacity: 1; } } p { position: absolute; color: #86868b; font-weight: 600; background: linear-gradient(0deg,#86868b 0%, #bdc2c9 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; top: 0; bottom: 0; margin: auto; height: fit-content; translate: 0 12em; max-width: 28em; text-align: center; } p span { position: relative; display: inline-block; -webkit-text-fill-color:#e7dfd6; font-weight: 1000; } .bg { width: 100%; height: 100%; max-width: 44em; position: absolute; } .bg > div { position: absolute; scale: 1.2; opacity: 0.6; } .bg > div:nth-child(1) { width: 100%; height: 100%; border-radius: 100em; box-shadow: inset 0 0 4em 3em rgba(238, 200, 175, 0.2), inset 0 0 2em 0.4em rgba(238, 200, 175, 0.2), 0 0 0.1em 0.1em rgba(238, 200, 175, 0.2), 0 0 1em 0.4em rgba(238, 200, 175, 0.3); translate: 0 -70%; animation: onloadbgt 1s ease-in-out forwards; } .bg > div:nth-child(2) { width: 100%; height: 100%; border-radius: 100em; box-shadow: inset 0 0 4em 3em rgba(238, 200, 175, 0.2), inset 0 0 2em 0.4em rgba(238, 200, 175, 0.2), 0 0 0.1em 0.1em rgba(238, 200, 175, 0.2), 0 0 1em 0.4em rgba(238, 200, 175, 0.3); translate: 0 70%; animation: onloadbgb 1s ease-in-out forwards; } @keyframes onloadbgt { 0% { translate: 0 -70%; opacity: 0.3; } 100% { translate: 0 -64%; opacity: 0.8; } } @keyframes onloadbgb { 0% { translate: 0 70%; opacity: 0.3; } 100% { translate: 0 64%; opacity: 0.8; } } </style> </head> <body translate="no"> <div class="bg"><div></div><div></div></div> <div class="header-text" aria-hidden="true"> Introducing<br><span class="glow-filter" data-text="Illuminated Glow Text.">Illuminated Glow Text.</span><br>Highlight the main focus text.<br> </div> <p> Experience a new way to draw attention to key elements with stunning <span>illuminated text.</span> Perfect for making a bold statement, this dynamic design ensures your content stands out effortlessly. </p> <svg class="filters" width='1440px' height='300px' viewBox='0 0 1440 300' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="glow-4" color-interpolation-filters="sRGB" x="-50%" y="-200%" width="200%" Height="500%"> <feGaussianBlur in="SourceGraphic" data-target-blur="4" stdDeviation="4" result="blur4"/> <feGaussianBlur in="SourceGraphic" data-target-blur="19" stdDeviation="19" result="blur1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0