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

2022-09-10 00:30:50 阅读：177 来源： 互联网

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

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无限线性； /* 动画 */  
 }

就是这样。

您可以通过视频教程找到完整代码这里 .

感谢您的阅读。 ❤️

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

标签：动画,100%,100px,分步,设置,按钮,255
来源： https://www.cnblogs.com/amboke/p/16675813.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

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

HTML

CSS