• CSS 实现卡片边框渐变动画

    前言

    👏CSS实现卡片边框渐变动画，速速来Get吧~
    🥇文末分享源代码。记得点赞+关注+收藏！

    1.实现效果

    在这里插入图片描述

    2.实现步骤

    • 父容器添加背景渐变色

    在这里插入图片描述

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

    • 1
     .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;
}

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

    在这里插入图片描述

    • 那么也就是说，我们可以设置一个动画，去改变渐变的角度，试试看，可以发现并木有生效
      在这里插入图片描述
    .card{
	+ animation: bg 2.5s linear infinite;
}

    • 1
    • 2
    • 3
    @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);
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    @property --rotate {
  syntax: "";
  initial-value: 0deg;
  inherits: false;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    .card {
 - background: linear-gradient(0deg, #ff1d74, #e3820c 43%, #c28846);
 - background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846);
}

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

    在这里插入图片描述

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

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

    在这里插入图片描述

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 添加span标签，基于父容器absolute定位，z-index层级设置为1，高于伪元素层级

    在这里插入图片描述

    <div class="card">
  <span>苏苏就是小苏苏888</span>
</div>

    • 1
    • 2
    • 3
    .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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 为span添加hover事件，设置为渐变色

    在这里插入图片描述

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 为父容器添加transform，进行一定的旋转

    在这里插入图片描述

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

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

    在这里插入图片描述

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    3.实现代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS 实现卡片边框渐变动画</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    @import url("https://fonts.googleapis.com/css?family=Amatic+SC");
    
    @property --rotate {
      syntax: "";
      initial-value: 0deg;
      inherits: false;
    }
    body {
      transform-style: preserve-3d;
      perspective: 1800px;
    }

    .card {
      background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846);
      border-radius: 15px;
      box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
      width: 300px;
      height: 200px;
      animation: bg 2.5s linear infinite, rotate 1s infinite alternate-reverse;
      position: relative;
      cursor: pointer;
      transform: rotateX(10deg) rotateY(15deg);
    }

    .card::after {
      content: "";
      background: #222;
      position: absolute;
      width: 296px;
      height: 196px;
      left: calc(50% - 148px);
      top: calc(50% - 98px);
      border-radius: 15px;
    }
    .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;
    }
    .card:hover span {
      background: linear-gradient(45deg, #ff1d74, #e3820c 43%, #c28846);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    @keyframes rotate {
      0% {
        transform: rotateX(10deg) rotateY(15deg);
      }
      100% {
        transform: rotateX(-10deg) rotateY(-15deg);
      }
    }
    @keyframes bg {
      0% {
        --rotate: 0deg;
      }
      100% {
        --rotate: 360deg;
      }
    }
  </style>
  <body>
    <div class="card">
      <span>苏苏就是小苏苏888</span>
    </div>
  </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89

    4.写在最后🍒

    看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕
    更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~

    参考链接：

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

  • 相关阅读:
    121. 买卖股票的最佳时机 --力扣 --JAVA
    Netty 核心模块组件
    什么是API网关？为什么要用API网关？
    关于开展2022年江苏省重点领域 首版次软件产品征集工作的通知
    2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书海口经济学院图书馆
    如何做口碑营销？企业实施网络口碑营销的技巧
    【无标题】EXCEL实现刷题
    TiDB x 北京银行丨新一代分布式数据库的探索与实践
    ACM MM 2022 Oral | PRVR: 新的文本到视频跨模态检索子任务
    01-http概述
  • 原文地址：https://blog.csdn.net/qq_48085286/article/details/128191511