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; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0