CSS 实现-渐变-旋转-边框

「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」

少啰嗦先看东西

设计思路

常规思路是创建一个转动渐变的边框，这样也可以实现，只是过程相对复杂，现在换种思路，不让边框选装而是让背景旋转。

1. 选好一个渐变背景图（这个图可以跟设计师要）
2. 把背景图顺时针/逆时针旋转
3. 在背景图只上覆盖你的内容

实现步骤

1. 渐变背景的获取，可以找设计师要，也可以自己在这个网站获取

网址： www.minimamente.com/example/gra…

2. 把背景图顺时针/逆时针旋转

  animation: move 2s linear infinite;
  @keyframes move {
    0% { background: linear-gradient(0deg, #13f41c 0%, #33acf1 100%);}
    12.5% {background: linear-gradient(45deg, #13f41c 0%, #33acf1 100%);}
    25% {background: linear-gradient(90deg, #13f41c 0%, #33acf1 100%);}
    37.5% {background: linear-gradient(135deg, #13f41c 0%, #33acf1 100%);}
    50% {background: linear-gradient(180deg, #13f41c 0%, #33acf1 100%);}
    62.5% {background: linear-gradient(225deg, #13f41c 0%, #33acf1 100%);}
    75% {background: linear-gradient(270deg, #13f41c 0%, #33acf1 100%);}
    100% {background: linear-gradient(360deg, #13f41c 0%, #33acf1 100%);}
}

3. 在背景图只上覆盖你的内容（居中覆盖，留边）

  display: flex;
  justify-content: center;
  align-items: center;

代码