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

【CSS】前端点点点加载小点样式css动画过程实现

在这里插入图片描述
对话的 ... 加载动画,直接用 CSS 就可以实现,样式可以自己改,逻辑大差不差

 <div class="loading-text"><span class="dot1"></span><span class="dot2"></span><span class="dot3"></span></div>
          .loading-text {> span {display: inline-block;width: 10px;height: 10px;background-color: $color;border-radius: 50%;& + span {margin-left: 5px;}}.dot1 {animation: dot 1s infinite;}.dot2 {animation: dot 1s infinite 0.2s;}.dot3 {animation: dot 1s infinite 0.4s;}.dot4 {animation: dot 1s infinite 0.6s;}@keyframes dot {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}}
http://www.lryc.cn/news/261156.html

相关文章:

  • 【LeetCode: 2415. 反转二叉树的奇数层 | BFS + DFS】
  • 期货股市联动(期股联动助推资本市场上扬)
  • 生成式AI的力量,释放RPA的无限潜能
  • 【leetcode】链表总结
  • 焦虑,其实是你自愿选择的
  • 4G无线工业级路由器在智能制造设备互联互通中的角色
  • gitbash下载安装
  • 系列一、Linux中安装MySQL
  • 开辟“护眼绿洲”,荣耀何以为师?
  • Modbus RTU和Modbus TCP的区别 深入篇
  • 【大数据】Doris 的集群规划和环境准备
  • connect: Network is unreachable问题解决
  • 三层交换与DHCP
  • 02markdown-学习笔记
  • UE5 动画 Sequencer-学习笔记
  • visual studio code 好用的插件
  • Redis 过期删除策略、内存回收策略、单线程理解
  • oracle 如何把数据库 date 日期格式 的数据 改成 2021-01-27
  • Git 使用教程(超级详细)
  • 动态规划习题
  • 安卓免Root做klipper上位机教程
  • 网络安全学习之信息泄露
  • Java智慧工地源码,智慧工地管理平台的技术架构和工作原理
  • Nginx配合Vue的history模式
  • 持续集成交付CICD:Jenkins使用GitLab共享库实现基于Ansible的CD流水线部署前端应用的蓝绿发布
  • 计算机网络中的通信子网主要有哪些功能?
  • 【大数据-Hadoop】从入门到源码编译-概念篇
  • 什么是设计模式
  • Typescript中Omit数据类型的理解
  • 【ArcGIS Pro微课1000例】0055:Pro中如何处理个人数据库(.mdb)