css特效1：流光背景？我不允许你还不会

话不多说先贴图（忽略页面杂乱的背景）

由于视频上传需要审核，所以暂时不展示动态效果。文章介绍的效果和视频均在

https://blog.csdn.net/src_chao1/article/details/128320581?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22128320581%22%2C%22source%22%3A%22src_chao1%22%7Dhttps://blog.csdn.net/src_chao1/article/details/128320581?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22128320581%22%2C%22source%22%3A%22src_chao1%22%7D

好了，进入正题

首先设置一个基本按钮样式，后续所有的效果都将以改样式为基础

<button class="button streamerLight ">
        <button-span>BUTTON</button-span>
</button>

这里我在button里添加一个自定义标签的原因之后再说

.button {
    cursor: pointer;/*设置鼠标为指针效果*/
    width: 300px;
    height: 60px;
    margin: 10px 10px 25px;
    text-align: center;
    font-size: 14px;
    border-radius: 20px;
    background-color: #4e5b69;
    color: #fff;
    box-shadow: 0 5px 5px 3px rgba(60, 62, 75, 0.2);
    position: relative;
    letter-spacing:5px;/*设置文本内容间距*/
}

.button只是一个默认样式

接下来是渐变色背景

.streamerLight{
    position: relative;
    background: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);/*渐变色设置*/
    background-size: 400%;/*设置大小，方便后续的流光效果*/
    border-radius: 10px;
    color: #fff;
}

.streamerLight这里面关键代码是渐变色背景和背景大小

linear-gradient是实现渐变色效果代码，详细介绍参考:(98条消息) CSS 的 linear-gradient() 线性渐变函数（带例子）_你好像很好吃a的博客-CSDN博客_linear-gradient

然后让鼠标移动上去后背景移动起来

 这时候鼠标移入就会发现背景颜色动起来了，但是并没有光影效果，所以我们接下来设置一个伪元素

.streamerLight::before {
    content: "";
    position: absolute;
    inset: -5px;
    background: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);
    background-size: 400%;
    border-radius: 10px;
    filter: blur(10px);/*模糊效果*/
}

同样让鼠标移入后伪元素也能触发动画

.streamerLight:hover::before {
    animation: steamer 8s infinite;
}

不过因为添加了伪元素，导致标签内部的文字被覆盖掉了，无法显示，因此设置自定义标签，让文本内容始终悬浮于伪元素之上

button-span {
    display: inline;
    position: relative;
    z-index: 2;
}

现在内容已经能正常显示了