CSS 实现卡片边框渐变动画

前言

CSS实现卡片边框渐变动画，速速来Get吧~

文末分享源代码。记得点赞+关注+收藏！

1.实现效果

在这里插入图片描述

2.实现步骤

• 父容器添加背景渐变色

在这里插入图片描述

 .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);
  }
}

• 通过参考chokcoco-CSS @property，让不可能变可能这篇文章，渐变是无法进行动画效果的
• 使用 @Property

@property --rotate {
  syntax: "";
  initial-value: 0deg;
  inherits: false;
}

.card {
 - background: linear-gradient(0deg, #ff1d74, #e3820c 43%, #c28846);
 - background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846);
}

• 那么现在我们只要动态的改变渐变色的角度即可，重写动画

在这里插入图片描述

@keyframes bg {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

• 为父容器添加一个伪元素，预留出2px的border，设置水平垂直居中

在这里插入图片描述

.card{
 + position: relative;
 + cursor: pointer;
}

.card::after {
   content: "";
   background: #222;
   position: absolute;
   width: 296px;
   height: 196px;
   left: calc(50% - 148px);
   top: calc(50% - 98px);
   border-radius: 15px;
}

• 添加span标签，基于父容器absolute定位，z-index层级设置为1，高于伪元素层级

在这里插入图片描述

  苏苏就是小苏苏888

.card span {
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 1;
  left: 0%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: bold;
  font-family: "Amatic SC";
  color: #fff;
  letter-spacing: 2px;
  transition: all 0.5s;
}

• 为span添加hover事件，设置为渐变色

在这里插入图片描述

.card:hover span {
  background: linear-gradient(45deg, #ff1d74, #e3820c 43%, #c28846);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

• 为父容器添加transform，进行一定的旋转

在这里插入图片描述

.card {
 + transform: rotateX(10deg) rotateY(15deg);
}

• 父容器再次添加一个transform动画，就完成啦~

在这里插入图片描述

.card{
   + animation: bg 2.5s linear infinite, rotate 1s infinite alternate-reverse;
}

@keyframes rotate {
  0% {
    transform: rotateX(10deg) rotateY(15deg);
  }
  100% {
    transform: rotateX(-10deg) rotateY(-15deg);
  }
}

3.实现代码

  
    
    
    
    
  
  
  
  
    

      苏苏就是小苏苏888
    
  

4.写在最后

看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭

更多相关内容，关注苏苏的bug，苏苏的github，苏苏的码云~

参考链接：

[1].chokcoco-CSS @property，让不可能变可能