我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

前言

大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟

开开心心学技术大法~~

来了来了，他真的来了~

正文

先看效果

iShot_2022-08-06_00.24.06

实现思路

不仔细看的话还以为只需要通过animation与text-shadow、box-shadow、background-image就可以实现
仔细看的话会发现，其实按钮的颜色不是简单的渐变，而是从一侧颜色开始变化，渐渐的颜色蔓延到另一侧，之后再有新的颜色延伸过来
- 当然，这个也可以通过animation与多段的background-image来实现
另外，不只是背景，连button的边缘颜色也是从一侧到另一侧渐变的，那这个怎么实现的？
- 难道也要通过animation与非常多段的box-shadow来实现吗？
其实不妨换一个思路，假设button是一个窗口，而button的背景可以是一个长画布，从窗口从左到右慢慢移入进来然后通过animation来循环
那怎样实现button的背景长画布呢？
- 可以通过background-image来实现多彩背景颜色，与background-size来实现长画布
  - 比如background-size:400%;
这样背景长画布就实现了
怎样实现button边缘的颜色从一边开始渐变呢？
同理，也可以用上面长画布的思想，但是通过什么属性来实现呢？
text-shadow吗？
不呀，再实现一个大的背景button不就ok了？
在常规状态下opacity掉，在:hover的时候将大背景button显示出来
大背景有了，怎样实现button的边缘虚化？
这个思路就多了，可以通过blur或filter来实现
- 其中blur的使用比较简单，就是一般的虚化，filter就比较牛了，还可以实现一堆滤镜的效果，具体效果我打算后续再出一篇讲解下，感兴趣的小伙伴也可以先了解下

具体实现

基础html结构

<body>
  <a href="#" class="guang">button</a>
</body>

很简单，实现一个button的容器即可

button样式

.guang {
  position: relative;
  display: inline-block;
  width: 220px;
  height: 80px;
  color: rgb(255, 255, 255);
  line-height: 80px;
  font-size: 35px;
  font-family: sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  border-radius: 30px;
  background: linear-gradient(90deg, rgb(39, 122, 218), rgb(74, 230, 121), rgb(201, 214, 13), rgb(226, 20, 233), rgb(16, 172, 219));
  background-size: 400%;
  z-index: 1;
  text-shadow: 0 0 5px white,
    0 0 5px white;
}

我是a标签，所以加上了text-decoration: none;

这里其他都一般，关键是text-shadow: 0 0 5px white, 0 0 5px white;让字体看着有霓虹灯的发散炫彩效果，之所以用白色，是因为白色看着对比更明显

实现长画布背景

  .guang {
    position: relative;
    display: inline-block;
    width: 220px;
    height: 80px;
    color: rgb(255, 255, 255);
    line-height: 80px;
    font-size: 35px;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    border-radius: 30px;
    background: linear-gradient(90deg, rgb(39, 122, 218), rgb(74, 230, 121), rgb(201, 214, 13), rgb(226, 20, 233), rgb(16, 172, 219));
    background-size: 400%;
    z-index: 1;
    text-shadow: 0 0 5px white,
      0 0 5px white;
  }

关键是background的线性渐变linear-gradient和background-size:400%

实现button边缘长画布

.guang::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 240px;
  height: 100px;
  background: linear-gradient(90deg, rgb(39, 122, 218), rgb(74, 230, 121), rgb(243, 169, 10), rgb(226, 20, 233), rgb(16, 172, 219));
  background-size: 400%;
  opacity: 0;
  z-index: -1;
  border-radius: 45px;
  transition: 0.6s;
}

这里的z-index:-1主要是为了让button的文案漏出来，要不然会被伪元素给挡住

transition: 0.6s是为了:hover的时候有个过渡

添加hover动画

.guang:hover {
  animation: move 5s linear alternate infinite;
}

@keyframes move {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 100%;
  }
}
.guang:hover::before {
  filter: blur(15px);
  opacity: 1;
  animation: move 8s linear alternate infinite;
}

完整代码

总结

关键是选择animation渐变还是选择长画布问题
- 理论上animation+渐变也是可以的实现类似的效果，只不过涉及到button边缘效果就比较复杂了。
- 相比而言长画布就很简单了
第二个关键点是长画布的实现
- 一个是button背景长画布
- 一个是button边缘长画布

结语

如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~

学习自老哥北极光之夜，感兴趣的可以去了解下。

文章如有错误或不严谨之处，还望指出，感谢感谢！！！

加油！

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」

纯css实现炫光流彩Button

前言

正文