其他分享
首页 > 其他分享> > 带有发光动画的按钮 — 分步指南

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

作者:互联网

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

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

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