前言
卡片边框加上流动的彩色光圈，并带有发光模糊，且 3s 无限旋转
效果
✨实现过程
- 通过
::after和::before伪元素创建一个渐变旋转边框和发光效果。 conic-gradient结合--angle变量控制选择，实现动画效果。property让--angle支持动画，使conic-gradient平滑旋转。animation让伪元素旋转不断重复且不断变化。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>animation-demo-one</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<h2>Animation Demo</h1>
</div>
<div class="card-body">
<div class="box">
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatibus nobis quaerat repellat iure consectetur magnam
reprehenderit fugit rem sit, error quae illum esse debitis quia
ducimus voluptates repellendus sunt at!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatibus nobis quaerat repellat iure consectetur magnam
reprehenderit fugit rem sit, error quae illum esse debitis quia
ducimus voluptates repellendus sunt at!
</div>
</div>
</div>
</div>
</body>
</html>css
*{
padding: 0;
margin: 0;
}
body{
font-family: Arial, sans-serif;
background-color: #0B0D15;
padding: 20px;
color: white;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card{
padding: 3em 2em;
width: 300px;
background: #1c1f2b;
text-align: center;
border-radius: 10px;
position: relative;
}
@property --angle{
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.card::after,.card::before{
content: '';
clear: both;
display: block;
width: 100%;
height: 100%;
background-image: conic-gradient(from var(--angle),#ff4545, #00ff99 , #006aff, #ff0095);
/* background-image: conic-gradient(from var(--angle),transparent 70%,blue 0); */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
padding: 3px;
border-radius: 10px;
animation: 3s spin linear infinite;
}
.card::before{
filter: blur(1.5rem);
}
@keyframes spin{
from{
--angle: 0deg;
}
to{
--angle: 360deg;
}
}
.card-header{
font-size: 1.5em;
margin-bottom: 2em;
}