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 dashed; } body { background-color: var(--card-color); display: flex; align-items: center; justify-content: center; font-family: "Mona Sans", sans-serif; } body > div { width: var(--card-width); width: min(480px, var(--card-width)); aspect-ratio: 1.5/1; color: white; margin: auto; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; border-radius: var(--card-radius); cursor: pointer; } body > div:hover > div { mix-blend-mode: darken; --text-color: white; box-shadow: 0 0 calc(var(--white-shadow) * 1vw) calc(var(--white-shadow) * 0.15vw) rgba(255, 255, 255, 0.2); animation: shadow-pulse calc(var(--animation-speed) * 2) linear infinite; } body > div:hover > div:before { --bg-size: 15; animation-play-state: paused; transition: --bg-size var(--interaction-speed) ease; } body > div:hover .glow { --glow-blur: 1.5; --glow-opacity: 0.6; --glow-scale: 2.5; --glow-radius: 0; --rotate: 900; --glow-rotate-unit: 0; --scale-factor: 1.25; animation-play-state: paused; } body > div:hover .glow:after { --glow-translate-y: 0; animation-play-state: paused; transition: --glow-translate-y 0s ease, --glow-blur 0.05s ease, --glow-opacity 0.05s ease, --glow-scale 0.05s ease, --glow-radius 0.05s ease; } body > div:before, body > div:after { content: ""; display: block; position: a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0