带有发光动画的按钮 — 分步指南

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 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/23462/13451000