设计思路｜按钮系列2 CSS实现渐变流光边框小按钮

接上篇 高亮光斑按钮小动画，按钮效果第二趴，一个渐变流光边框小按钮，最怕UI说：这样的效果能做吗？

我们先来拆解一下

1、一个渐变底色 2、一个带有蒙层的渐变颜色的边 3、hover时的光斑效果

1&2其实很好实现，只需要在背景设置一个透明白色蒙层，然后在内部重新设置渐变（尺寸稍小一点）

如果我们将白色蒙层放大，再加上一点角向渐变

给最外层加上overflow:hidden,同时将这个蒙层设置一个旋转动画

那么再加上内层的渐变后，光斑的效果就出来了

代码实现 html部分

    <ul>
      <li
        class="createTaskItem cursor"
        v-for="(item, index) in 3"
        :key="index"
      >
      </li>
    </ul>

css部分

  .createTaskItem {
    width: 284px;
    height: 90px;
    border-radius: 16px;
    padding: 20px 24px;
    color: $cWhite;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 10;
    &:not(:last-child) {
      margin-right: 20px;
    }
    &:nth-child(1) {
      background: linear-gradient(315deg, #7f15db 0%, #a708d6 100%);
    }
    &:nth-child(2) {
      background: linear-gradient(135deg, #7f15db 0%, #503be0 100%);
    }
    &:nth-child(3) {
      background: linear-gradient(135deg, #503be0 0%, #195dd1 100%);
    }
    &:nth-child(4) {
      background: linear-gradient(315deg, #15bde5 0%, #195dd1 100%);
    }
    &::before {
      content: "";
      width: 200%;
      height: 500%;
      background-color: rgba(255, 255, 255, 0.4);
      position: absolute;
      top: -200%;
      left: -50%;
      z-index: -2;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 2px;
      z-index: -1;
      border-radius: 14px;
    }
    &:nth-child(1)::after {
      background: linear-gradient(315deg, #7f15db 0%, #a708d6 100%);
    }
    &:nth-child(2)::after {
      background: linear-gradient(135deg, #7f15db 0%, #503be0 100%);
    }
    &:nth-child(3)::after {
      background: linear-gradient(135deg, #503be0 0%, #195dd1 100%);
    }
    &:nth-child(4)::after {
      background: linear-gradient(315deg, #15bde5 0%, #195dd1 100%);
    }
    &:hover {
      box-shadow: 0px 2px 16px rgba(8, 6, 64, 0.25);
      transform: translateY(-8px);
      &::before {
        background-image: conic-gradient(transparent, #fff, transparent 30%);
        z-index: -2;
        animation: rotate 5s linear infinite;
      }
    }
    @keyframes rotate {
      to {
        transform: rotate(360deg);
      }
    }
  }