CSS 实现卡片边框渐变动画

1.实现效果

2.实现步骤

• 父容器添加背景渐变色

<div class="card"></div> 

 .card {background: linear-gradient(0deg, #ff1d74, #e3820c 43%, #c28846);border-radius: 15px;box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);width: 300px;height: 200px;
} 

• 试着改变渐变色的角度，这里可以将渐变色改的明显一点，可以发现角度的变化，会让父容器的四边呈现不同的色值

• 那么也就是说，我们可以设置一个动画，去改变渐变的角度，试试看，可以发现并木有生效

.card{
	+ animation: bg 2.5s linear infinite;
} 

@keyframes bg {0% {border: 5px solid blue;background: lin