css 流光按钮

html

!DOCTYPE html

html lang en

head

  meta charset UTF-8

  meta name viewport content width device-width, initial-scale 1.0

  meta http-equiv X-UA-Compatible content ie edge

  title 流光按钮 /title

  style

    keyframes animate {

     0% {

       background-position: 0%;

     }

     50% {

       background-position: 200%;

     }

     100% {

       background-position: 400%;

     }

   }

   .colorButton {

       position: relative;

       font-size: 12px;

       color: white;

       width: 100px;

       height: 40px;

       line-height: 40px;

       vertical-align: middle;

       text-align: center;

       z-index: 1;

   }

   

   .colorButton::before {

       content:

       width: 100px;

       height: 40px;

       line-height: 40px;

       position: absolute;

       background: linear-gradient(-45deg, blue, yellow, pink, red, blue);

       left: 0px;

       background-size: 700%;

       border-radius: 50px;

       z-index: -1;

   }

   .colorButton:hover::before {

       filter: blur(1px);

       animation: animate 15s linear infinite;

   }

  /style

/head

body

  div class colorButton 流光按钮 /div

/body

/html

## 知识点

* filter: blur(1px); 模糊效果

* z-index: 调整存在上下层关系的显示优先级

* animation 动画效果

* 伪类 hover /伪元素(before)的使用

* background: linear-gradient(-45deg, blue, yellow, pink, red, blue); 线性背景的使用

## 注意点

这里注意伪元素的使用 将样式设置到伪元素上 标签内只做内容显示使用。其次就是设置显示层级 将标签内元素显示层级设置成高于伪元素的显示层级 避免内容被盖住。

CSS实现背景跟随滑动的按钮菜单效果 通过transition过渡属性，可以将相关css属性的变化，改为一个持续一段时间的连续过程，而不是使css样式的改变立即生效，其过程按照指定的曲线速率变化......
复刻解析一个流光溢彩炫到掉渣的 CSS 动画按钮 最近在看 next.js 官网是被引流到 conf 页面，发现上面有一个炫酷的按钮，按钮的边框色彩不断变动给人感觉是光在随着按钮旋转一般，感觉挺酷的，复刻一下讲解下原理。