css实现边框光效悬浮动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现边框光效悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @font-face { font-family: "Mona Sans"; src: url("//repo.bfw.wiki/bfwrepo/font//Mona-Sans.woff2") format("woff2 supports variations"), url("//repo.bfw.wiki/bfwrepo/font/Mona-Sans.woff2") format("woff2-variations"); font-weight: 100 1000; } @property --hue { syntax: "<number>"; inherits: true; initial-value: 0; } @property --rotate { syntax: "<number>"; inherits: true; initial-value: 0; } @property --bg-y { syntax: "<number>"; inherits: true; initial-value: 0; } @property --bg-x { syntax: "<number>"; inherits: true; initial-value: 0; } @property --glow-translate-y { syntax: "<number>"; inherits: true; initial-value: 0; } @property --bg-size { syntax: "<number>"; inherits: true; initial-value: 0; } @property --glow-opacity { syntax: "<number>"; inherits: true; initial-value: 0; } @property --glow-blur { syntax: "<number>"; inherits: true; initial-value: 0; } @property --glow-scale { syntax: "<number>"; inherits: true; initial-value: 2; } @property --glow-radius { syntax: "<number>"; inherits: true; initial-value: 2; } @property --white-shadow { syntax: "<number>"; inherits: true; initial-value: 0; } :root { --debug: 0; --supported: 0; --not-supported: 0; --card-color: hsl(260deg 100% 3%); --text-color: hsl(260deg 10% 55%); --card-radius: 3.6vw; --card-width: 35vw; --border-width: 3px; --bg-size: 1; --hue: 0; --hue-speed: 1; --rotate: 0; --animation-speed: 4s; --interaction-speed: 0.55s; --glow-scale: 1.5; --scale-factor: 1; --glow-blur: 6; --glow-opacity: 1; --glow-radius: 100; --glow-rotate-unit: 1deg; } body::before, body::after { content: "CSS.registerProperty is supported ✅"; position: absolute; display: block; top: 8px; left: 0; right: 0; margin: auto; width: calc(100% - 160px); max-width: 380px; height: auto; padding: 8px; border-radius: 8px; background: #48b93c; color: white; text-align: center; font-family: sans-serif; z-index: var(--supported, 0); opacity: var(--supported, 0); } body::after { content: "CSS.registerProperty is NOT supported ❌"; background: #b93c3c; z-index: var(--not-supported, 0); opacity: var(--not-supported, 0); } body::before, body::after { display: none !important; } html, body { height: 100%; width: 100%; padding: 0; margin: 0; } *, *:before, *:after { outline: calc(var(--debug) * 1px) red.........完整代码请登录后点击上方下载按钮下载查看
网友评论0