skip to content
Logo 三七の小站

纯css实现环绕渐变

/ 2 min read

来源: Simplest inner glow card animation

点击展开
index.html
<!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>