当前位置: 首页 > news >正文

css写一个按钮流光动画效果

规则说明

  1. 按钮实现一个简易的流光动画
streamer.css.pay_button{width: 281*2px;height: 104px;border-radius: 80px;color: rgba(255, 255, 255, 1);background: linear-gradient(90deg, #FFA023 0%, #FF2B87 100%);margin-bottom: 20px;font-size: 32px;position: relative;overflow: hidden;transition: background-color 0.3s ease;font-weight: 700;
}.pay_button::before{content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);transform: skewX(-45deg);animation: streamer 2s infinite;}// 流光动画keyframes streamer {0%{left: -100%;}100%{left: 100%;}  }
http://www.lryc.cn/news/420598.html

相关文章:

  • AxMath保姆级安装教程(word联用)及使用TIPS
  • Vue-03.指令-v-on
  • 接口基础知识6:详解http request body(一篇讲完常见请求体)
  • Windows Server 安装Web,DHCP,DNS,FTP四大服务及其配置和监控方式
  • 创意指南丨VR游览沉浸式空间体验
  • 【iOS】—— autoreleasePool以及总结
  • 培训第二十五天(python中执行mysql操作并将python脚本共享)
  • LVS实战项目
  • 笔记小结:《利用python进行数据分析》之层次化索引
  • Linux的线程篇章 - 线程池、进程池等知识】
  • 汇昌联信做拼多多运营正规吗?
  • 240810-Gradio自定义Button按钮+事件函数+按钮图标样式设定
  • 排序算法--快速排序
  • springMVC -- 学习笔记
  • 修复本地终端(windows)连接服务器使用zsh出现乱跳的问题
  • 【扒代码】regression_head.py
  • vue2 使用axios 请求后台返回文件流导出为excel
  • MATLAB数据可视化:在地图上画京沪线的城市连线
  • 【AI】CV基础1
  • 数据结构《栈》
  • 说一说mysql的having?和where有什么区别?
  • LeetCode45. 跳跃游戏 II
  • 算法打卡 Day19(二叉树)-平衡二叉树 + 二叉树的所有路径 + 左叶子之和 + 完全二叉树的节点个数
  • 国际以太网专线 (IEPL)/国际专线(IPLC)-全球覆盖,无界沟通
  • 信息安全管理知识体系攻略(至简)
  • HCIE学习笔记:IPV6 地址、ICMP V6、NDP 、DAD (更新补充中)
  • 人工智能】Transformers之Pipeline(九):物体检测(object-detection)
  • [SWPUCTF 2021 新生赛]easy_md5
  • Redis面试题大全
  • 【langchain学习】BM25Retriever和FaissRetriever组合 实现EnsembleRetriever混合检索器的实践