css特效2：流光边框

最新推荐文章于 2025-03-20 11:21:26 发布

原创最新推荐文章于 2025-03-20 11:21:26 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

css3动态特效专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用CSS实现按钮的流光边框效果。通过设置按钮的::after伪元素来实现流光特效，包括鼠标移入和按下的不同状态展示。

作为流光系列之一，流光边框和流光背景只有在::after上设置存在区别，所以本文中将不会有与流光背景相同的代码，如果您还没有看流光背景时怎么做的话，建议先看我前面的文章

css特效1：流光背景？我不允许你还不会_雪碧瓶子用一年的博客-优快云博客https://blog.youkuaiyun.com/src_chao1/article/details/128319687?spm=1001.2014.3001.5501

好了，下面我们看一下效果图

正常状态：

鼠标移入

鼠标按下

可以看到与之前流光背景的区别就在于按钮内部的颜色并不是流光效果，那是因为我们在按钮上又添加了伪元素::after，遮住了在::before中的流光效果。

代码部分

.streamerLightBorder::after {
    content: "";
    position: absolute;
    inset: 5px;
    background: #4e5b69;
    background-size: 400%;
    border-radius: 10px;
    filter: blur(10px);
}
.streamerLightBorder:active::after {
    background:  linear-gradient(to right, #f16443, #eeba45, #ef6297, #ec3636);
    background-size: 400%;
}

.streamerLightBorder选择器就是流光边框需要单独用到的代码,其中:acive是给按下鼠标后::after显示样式，再加上一篇的全部代码就会显示出流光边框的效果