<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>渐变动画边框</title>
<style type="text/css">
.card{
margin: 0 auto;
width: 300px;
height：300px;
background: #000;
color: #fff;
border-radius: 10px;
text-align: center;
position: relative;
}
/*申明变量-属性*/
@property --angle{
syntax: "<angle>";
initial-value:0deg;
inherits: false;
}
.card::after,.card::before{
content: "";
position: absolute;
top: 50%;
height: 100%;
width: 100%;
z-index: -1;
transform:translate(-50%,-50%);
background-image: conic-gradient(from var(--angle),transparent 80%,green,blue,red);
padding: 6px;
border-radius: 10px;
animation: 3s spin linear infinite ;
}
.card::before{
filter: blur(0.5rem);
opacity: 0.8;
}
/*动画旋转*/
@keyframes spin{
from{
--angle: 0deg;
}
to{
--angle:360deg;
}
}
</style>
</head>
<body>
<div class="card">
<div>
<h1>Animate Borders</h1>
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Atque adexercitationem voluptatem ullam et,natus impedit quae veniam optio adoloremque officiis beatae, itaquenesciunt nostrum quasi molestiaelaudantium dolor asperiores solutasint sed ratione cupiditate.Lau
标签：angle,--,背景,50%,0deg,动态,card,before From： https://www.cnblogs.com/rrwong/p/18397511