1.页面变灰

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

html {
    filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’>                      <feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\’/></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代替,其他元素做法类似,如下:

测试按钮