<html>
<head>
<style>
@property --direc {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.card{
--direc: 0deg;
height: 300px;
background: linear-gradient(var(--direc),red,blue);
animation: spin 3s linear infinite;
}
@keyframes spin {
to{
--direc: 360deg;
}
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>
可以实现一个动画效果
