纯css实现炫光流彩Button

news2024/11/25 7:37:21

正文

先看效果

实现思路

不仔细看的话还以为只需要通过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;
}

这里其他都一般，关键是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;
}

完整代码

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

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

</html>

css

* {
    margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.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;
}

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

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

  100% {
    background-position: 100%;
  }
}

.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;
}

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