带有发光动画的按钮 — 分步指南
带有发光动画的按钮 — 分步指南
HTML
对于 HTML，我们只有一个按钮元素。
<button>按钮</button>
CSS
对于 CSS，首先我们将设置按钮样式。
我们将移除边框并将其舍入 1 个像素。
然后我们将背景设置为绿色，添加一些填充，隐藏所有溢出并将位置设置为相对。
按钮 {
边框：无；
边框半径：1px；
填充：5px 20px；
背景：#00ffb3；
位置：相对；
溢出：隐藏；
}
现在我们将设置 before 伪元素的样式。这个元素将产生光泽效果。
我们将内容和位置设置为绝对高度和 100 像素宽度。
背景将是线性渐变，旋转 120 度，在两个透明的之间有白色。
我们将 top 设置为 0 并将 left 设置为 -100 像素（元素的宽度）。
按钮：之前{
内容： '';
位置：绝对；
宽度：100px；
高度：100%；
背景图像：线性渐变（
120度，
RGBA(255,255,255, 0) 30%,
rgba(255,255,255, .8),
RGBA(255,255,255, 0) 70%
);
顶部：0；
左：-100px；
}
现在我们将创建动画。
我们将简单地将 left 属性设置为在 0% 处为 -100 像素，在动画的 20% 处设置为 100%。
此外，我们将设置 100% 到 100% 的动画，以使元素不会移回其原始位置。
@keyframes 闪耀{
0% {左：-100px}
20% {左：100%}
100% {左：100%}
}
现在我们将动画添加到伪元素之前，持续时间为 3 秒，无限，线性。
按钮：之前{
内容： '';
位置：绝对；
宽度：100px；
高度：100%；
背景图像：线性渐变（
120度，
RGBA(255,255,255, 0) 30%,
rgba(255,255,255, .8),
RGBA(255,255,255, 0) 70%
);
顶部：0；
左：-100px；
动画：闪耀3s无限线性； /* 动画 */
}
就是这样。
您可以通过视频教程找到完整代码 这里 .
感谢您的阅读。 ❤️
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
