带有发光动画的按钮 — 分步指南
2022/9/10 6:55:14
本文主要是介绍带有发光动画的按钮 — 分步指南,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
带有发光动画的按钮 — 分步指南
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
这篇关于带有发光动画的按钮 — 分步指南的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-01为什么公共事业机构会偏爱 TiDB :TiDB 数据库在某省妇幼健康管理系统的应用
- 2024-04-26敏捷开发:想要快速交付就必须舍弃产品质量?
- 2024-04-26静态代码分析的这些好处,我竟然都不知道?
- 2024-04-26你在测试金字塔的哪一层?(下)
- 2024-04-26快刀斩乱麻,DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者,Spring Boot 项目如何部署