• 1. 页面变灰
• 2. 按钮边框动画
• 3. 滚动条样式修改

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代替，其他元素做法类似，如下：

测试按钮

---

3. 滚动条样式修改

  默认的滚动条样式真的丑得不忍直视，这里记录一下简单修改滚动条样式的css代码

div::-webkit-scrollbar{
  width:6px;
  height:6px;
}
div::-webkit-scrollbar-track{
  background: rgb(239, 239, 239);
  border-radius:2px;
}
div::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
  background: #333;
}
div::-webkit-scrollbar-corner{
  background: #179a16;
}
// 以简单的div作为例子，实际开发中为了照顾风格的统一，一般给所有会出现滚动的标签统一设置滚动条样式

参数说明

• ::-webkit-scrollbar 滚动条整体部分
• ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
• ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
• ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
• ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
• ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
• ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

---