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

news2024/9/24 19:13:05

在这里插入图片描述
对话的 ... 加载动画,直接用 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.coloradmin.cn/o/1315360.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

动态面板简介以及ERP原型图案列

动态面板简介以及ERP原型图案列 1.Axure动态面板简介2.使用Axure制作ERP登录界面3.使用Asure完成左侧菜单栏4.使用Axuer完成公告栏5.使用Axuer完成左边侧边栏 1.Axure动态面板简介 在Axure RP中&#xff0c;动态面板是一种强大的交互设计工具&#xff0c;它允许你创建可交互的…

pgAdmin 4的安装与使用

一、pgAdmin 4安装 ①访问pgAdmin官网&#xff0c;下载路径如下&#xff1a; pgAdmin下载 ②选择个人电脑所对应的系统&#xff0c;我的电脑是Windows10系统&#xff0c;所以选择Windows ③选择所需要的pgAdmin版本&#xff0c;我选择的是最新的v7.3版本 ④下载完成后双击pg…

Bootstrap在弹框Povoper中显示图片

项目开发需要实现这个效果&#xff0c;当鼠标划过这个按钮的时候&#xff0c;会显示出指定的图片出来 HTML代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"…

《Linux C编程实战》笔记:文件读写

Linux c下文件读写可用creat&#xff0c;open&#xff0c;close&#xff0c;read&#xff0c;write&#xff0c;lseek等函数。对于跨平台的程序还是用C标准库的fopen等。 open #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> int open …

【️什么是分布式系统的一致性 ?】

&#x1f60a;引言 &#x1f396;️本篇博文约8000字&#xff0c;阅读大约30分钟&#xff0c;亲爱的读者&#xff0c;如果本博文对您有帮助&#xff0c;欢迎点赞关注&#xff01;&#x1f60a;&#x1f60a;&#x1f60a; &#x1f5a5;️什么是分布式系统的一致性 &#xff1f…

基于QTreeWidget实现带Checkbox的多级组织结构选择树

基于QTreeWidget实现带Checkbox的多级组织结构选择树 采用基于QWidgetMingw实现的原生的组织结构树 通过QTreeWidget控件实现的带Checkbox多级组织结构树。 Qt相关系列文章&#xff1a; 一、Qt实现的聊天画面消息气泡 二、基于QTreeWidget实现多级组织结构 三、基于QTreeWidget…

Git忽略已经提交的文件

原理类似于 Android修改submodule的lib包名

FastAdmin后台安装出现2054错误的解决办法

用Navicat修改密码验证方式。MySQL Workbench的Server菜单中的Users and Privileges菜单中似乎不支持此项修改。 修改完毕以后也许会报错&#xff1a; Access denied for user ‘root‘‘localhost‘ (using password: YES) 用以下命令无密进入mysql。 C:\Program Files\MySQ…

基于SSM的校友录设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Qt实现的聊天画面消息气泡

Qt实现的聊天画面消息气泡 采用基于QWidgetMingw实现的原生的消息气泡 通过覆写QWidget::paintEvent(QPaintEvent *event)方法&#xff0c;每当窗口尺寸变化时都会触发paintEvent事件&#xff0c;在覆写QWidget::paintEvent(QPaintEvent *event)方法中重新绘制聊天气泡在QListW…

Unity2023.3(Unity6)版本开始将可以发布WebGPU

翻译一段官网上的话&#xff1a; 利用Unity 2023.3(正式发布时应该称为Unity6)中最新的WebGPU图形API集成&#xff0c;尝试最大限度的提升您的网络游戏的真实感。 通过与谷歌的战略合作&#xff0c;Unity实时3D平台的强大的图形功能现在为图形丰富的网络游戏进行微调&#xff0…

好用的硬盘分区工具,傲梅分区助手 V10.2

傲梅分区助手软件可以帮助用户在硬盘上创建、调整、合并、删除分区&#xff0c;以及管理磁盘空间等操作。它可以帮助你进行硬盘无损分区操作。 支持系统 目前这款软件支持 Windows 7、Windows 8、Windows 10、Windows 11 等个人系统&#xff0c;还支持 Windows 2012/2016/2019…

城市货车通行码二维码解析

目录 说明 界面 下载 城市货车通行码二维码解析 说明 二维码扫描信息为&#xff1a; tmri://12123?ywlx1041&ewmeyJ0eHpiaCI6IjUxMDcwMDAwMDE0MyIsInR4em1jIjoiQeivgSIsImhwemwiOiIwMiIsImhwaG0iOiLlt51CMkwzMjYiLCJrc3JxIjoiMjAyMS0xMS0yOCIsImpzcnEiOiIyMDIyLTEyL…

蓝桥杯专题-真题版含答案-【祖冲之割圆法】【错误票据】【显示为树形】【汉字相乘】

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

yolov8实战第一天——yolov8部署并训练自己的数据集(保姆式教程)

​​​​​​yolov8实战第二天——yolov8训练结果分析&#xff08;保姆式解读&#xff09;-CSDN博客 YOLOv8是一种基于深度神经网络的目标检测算法&#xff0c;它是YOLO&#xff08;You Only Look Once&#xff09;系列目标检测算法的最新版本。YOLOv8的主要改进包括&#xf…

5G工业网关视频传输应用

随着科技的不断进步&#xff0c;5G网络技术已经成为了当前最热门的话题之一。而其中一个引人注目的领域就是5G视频传输和5G工业网关应用。在传统网络通信中&#xff0c;由于带宽和延迟的限制&#xff0c;视频传输常常受到限制&#xff0c;而工业网关应用也存在着链路不稳定、数…

Android12-RK3588_s-开机动画

目录 一、实现自定义开机动画 步骤一&#xff1a;准备 bootanimation.zip 步骤二&#xff1a;将 bootanimation.zip 放到 /system/media/bootanimation.zip下 步骤三&#xff1a;重启即可 二、注意事项 2.1 bootanimation.zip 压缩 2.2 bootanimation.zip 存放 2.3 boo…

STM32_启动流程详解

目录标题 前言 启动流程概述复位中断函数详解SystemInit函数详解 __main函数详解 附录 stm32单片机的存储器映像中断向量表的映射 前言 最近在学习IAP远程OTA升级单片机固件程序&#xff0c;发现自己对单片机的启动流程还不是那么了解&#xff0c;就总结整理一下吧。 启动流程…

如何进行Feign的自定义配置

Feign可以支持很多的自定义配置&#xff0c;下列是部分配置信息 类型作用说明Logger.Level修改日志级别配置键&#xff1a;loggerLevel&#xff0c;包含四种不同的级别&#xff1a;NONE、BASIC、HEADERS、FULLClass<Retryer>失败重试机制配置键&#xff1a;retryer&#…

C语言程序_速通_基础_笔记1_备战大一期末考_12.16

1.固定格式 #include<stdio.h>int main(){return 0;} 2.printf 正常输出&#xff1a;printf("XXXXX"); 如果没有任何换行符什么的&#xff0c;输进去多少个printf&#xff0c;就直接连在一起。 \n&#xff0c;换行 \t 空格 3.int float double char flo…