src_chao1的博客

直到上一个特效发布后我才注意到这个功能强大的一个clip-path属性，但是在这里我就不多介绍了，感兴趣可以自行搜索其他博主关于clip-path的文章。这次更新内容主要在于耳朵效果和全新的波纹效果，这些新的效果全是使用clip-path属性制作的最新版本资源视频clip新增的类选择器pulseClip：所有使用clip-path制作小耳朵的新样式使用的类，不使用其他选择器默认直边心形clipStar：五角星clipSixStar：六角星clipDownArrow：下箭头。

作为流光系列之一，流光边框和流光背景只有在::after上设置存在区别，所以本文中将不会有与流光背景相同的代码，如果您还没有看流光背景时怎么做的话，建议先看我前面的文章。可以看到与之前流光背景的区别就在于按钮内部的颜色并不是流光效果，那是因为我们在按钮上又添加了伪元素::after，遮住了在::before中的流光效果。.streamerLightBorder选择器就是流光边框需要单独用到的代码，加上上一篇的全部代码就会显示出流光边框的效果。css特效1：流光背景？好了，下面我们看一下效果图。

好了，从视频中我们能看到每种效果都带有三个不同样式展示，这三种样式是制作的三种默认主题：确定、取消、删除，匹配所有效果。同时镜面反光效果由于兼容性问题，可以进行单独设置（视频中都带有镜面反光）。

不过因为添加了伪元素，导致标签内部的文字被覆盖掉了，无法显示，因此设置自定义标签，让文本内容始终悬浮于伪元素之上。这时候鼠标移入就会发现背景颜色动起来了，但是并没有光影效果，所以我们接下来设置一个伪元素。这里我在button里添加一个自定义标签的原因之后再说。话不多说先贴图（忽略页面杂乱的背景）同样让鼠标移入后伪元素也能触发动画。然后让鼠标移动上去后背景移动起来。首先设置一个基本按钮样式。现在内容已经能正常显示了。