kun-galgame-vue/src/styles/effect/effect.scss

/* 
 * 特效 css1，需要四个 <span> 元素，并将所要应用特效的元素名称设置为 .kungalgame-comet-surround
 */

/* 回复按钮 */
.kungalgame-comet-surround {
  position: relative;
  padding: 7px 17px;
  color: var(--kungalgame-blue-3);
  overflow: hidden;
  border: 2px solid var(--kungalgame-blue-2);
  filter: hue-rotate(0deg);
  transition: all 0.1s linear;
  cursor: pointer;
  &:hover {
    border: 2px solid transparent;
    color: var(--kungalgame-red-3);
    & > span {
      position: absolute;
      display: block;
      &:nth-child(1) {
        filter: hue-rotate(0deg);
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--kungalgame-blue-3)
        );
        animation: animate1 1s linear infinite;
      }
      &:nth-child(2) {
        filter: hue-rotate(60deg);
        top: -100%;
        right: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(
          180deg,
          transparent,
          var(--kungalgame-blue-3)
        );
        animation: animate2 1s linear infinite;
        animation-delay: 0.25s;
      }
      &:nth-child(3) {
        filter: hue-rotate(120deg);
        bottom: 0;
        right: 0;
        width: 100%;
        background: linear-gradient(
          270deg,
          transparent,
          var(--kungalgame-blue-3)
        );
        animation: animate3 1s linear infinite;
        animation-delay: 0.5s;
      }
      &:nth-child(4) {
        filter: hue-rotate(300deg);
        bottom: -100%;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(
          360deg,
          transparent,
          var(--kungalgame-blue-3)
        );
        animation: animate4 1s linear infinite;
        animation-delay: 0.75s;
      }
    }
  }
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}
@keyframes animate3 {
  0% {
    right: -100%;
    height: 3px;
  }
  50%,
  100% {
    height: 2px;
    right: 100%;
  }
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}