来源: Simplest inner glow card animation
点击展开
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Auown.com</title> <style> @property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; } .card { overflow: hidden; position: relative; width: min(12.5em, 80vmin); aspect-ratio: 1; border-radius: 0.5em; place-self: center; place-content: center; padding: 0.5em; color: #ededed; font: clamp(1em, 2vw + 2vh, 2em) sans-serif; text-align: center; text-transform: uppercase; text-wrap: balance; }
.card::before { position: absolute; z-index: -1; inset: -1em; border: solid 1.25em; border-image: conic-gradient(from var(--a), #669900, #99cc33, #ccee66, #006699, #3399cc, #990066, #cc3399, #ff6600, #ff9900, #ffcc00, #669900) 1; filter: blur(0.75em); animation: a 4s linear infinite; content: ""; }
@keyframes a { to { --a: 1turn; } }
html, body, div { display: grid; }
html { min-height: 100%; }
body { background: url(https://images.unsplash.com/photo-1729824346255-52a8f898fe84?w=1400) 50%/cover #212121; background-blend-mode: multiply; grid-template-rows: 1fr auto; min-height: 100vh; margin: 0; color: #ededed; }
.footer { grid-row: 2; text-align: center; padding: 1rem; background-color: rgba(33, 33, 33, 0.8); font-size: 0.8rem; }
.footer a { color: #ededed; text-decoration: none; margin: 0 10px; }
.footer a:hover { text-decoration: underline; }
.beian-info { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 10px; }
.beian-info img { vertical-align: middle; margin-right: 5px; } </style></html>