CSS 实现卡片边框渐变动画

最新推荐文章于 2024-07-10 17:46:06 发布

梅花十三儿

最新推荐文章于 2024-07-10 17:46:06 发布

阅读量375

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/Android062005/article/details/128527994

版权

这篇博客介绍了如何使用CSS3实现卡片边框的渐变动画效果。通过设置父容器的背景渐变色和角度变化，利用@Property实现动画。内容包括实现步骤、关键代码及在线预览。同时，文章提及了JS高频面试题的资源分享。

摘要由CSDN通过智能技术生成

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: linear-gradient(0deg, #ff1d74, #e3820c 43%, #c28846);}100% {border: 5px solid #fff;background: linear-gradient(360deg, #ff1d74, #e3820c 43%, #c28846);}
}