• 1. 页面变灰
• 2. 按钮边框动画

1. 页面变灰

  这个样式的话，或许只是在某些特殊场合才需要用到，所以为了方便，可以直接改在html标签上，也方便日后去除。

html {
  filter: url(“data:image/svg + xml;utf8,
    <svgxmlns=\’http://www.w3.org/2000/svg\’><filterid=\’grayscale\’><feColorMatrixtype=\’matrix\’values=\’0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010\’/></filter></svg>#grayscale”) !important; /* Firefox 10+, Firefox on Android */
  filter: gray !important; /* IE6-9 */
  -webkit-filter: grayscale(
    100%
  ) !important; /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
//以上是兼容所有浏览器的写法，带上important防止被后续定义的样式覆盖

2. 按钮边框动画

  这个效果其实就是在按钮的边框上放上一圈转呀转的光效，可以用来表示强调，使按钮更显眼？(⊙o⊙)…

<!--只列举相关部分-->
<template>
  <div class="description">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <el-button size="small">测试按钮</el-button>
  </div>
</template>

<style lang="scss" scoped>
  .description {
    width: 70%;
    text-align: center;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    span {
      display: block;
      position: absolute;
      &:nth-child(1) {
        top: 0;
        left: -100%;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #03e9f4);
        animation: btn-anim1 1s linear infinite;
      }
      &:nth-child(2) {
        top: -100%;
        right: 0;
        width: 2px;
        height: 100%;
        background: linear-gradient(180deg, transparent, #03e9f4);
        animation: btn-anim2 1s linear infinite;
        animation-delay: 0.25s;
      }

      &:nth-child(3) {
        bottom: 0;
        right: -100%;
        width: 100%;
        height: 2px;
        background: linear-gradient(270deg, transparent, #03e9f4);
        animation: btn-anim3 1s linear infinite;
        animation-delay: 0.5s;
      }

      &:nth-child(4) {
        bottom: -100%;
        left: 0;
        width: 2px;
        height: 100%;
        background: linear-gradient(360deg, transparent, #03e9f4);
        animation: btn-anim4 1s linear infinite;
        animation-delay: 0.75s;
      }
    }
    >>> .el-button {
      width: 100%;
      background: linear-gradient(100deg, #003f77, #409eff) !important;
      font-size: 14px;
      letter-spacing: 1px;
      border: 0px;
    }
  }

  @keyframes btn-anim1 {
    0% {
      left: -100%;
    }

    50%,
    100% {
      left: 100%;
    }
  }

  @keyframes btn-anim2 {
    0% {
      top: -100%;
    }

    50%,
    100% {
      top: 100%;
    }
  }

  @keyframes btn-anim3 {
    0% {
      right: -100%;
    }

    50%,
    100% {
      right: 100%;
    }
  }

  @keyframes btn-anim4 {
    0% {
      bottom: -100%;
    }

    50%,
    100% {
      bottom: 100%;
    }
  }
</style>

---

  这里放上演示效果，这里避免可以点击，换成了div代替，其他元素做法类似，如下：

测试按钮