前端点点点加载小点样式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;
              }
            }
          }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/238444.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SSM整合——Springboot

1.0 概述 1.1 持久层&#xff1a; DAO层&#xff08;mapper&#xff09; DAO层&#xff1a;DAO层主要是做数据持久层的工作&#xff0c;负责与数据库进行联络的一些任务都封装在此 DAO层的设计首先是设计DAO的接口&#xff0c; 然后在spring-mapper.xml的配置文件中定义此接…

evo_res指令使用及各参数使用效果

目录 参数含义 效果演示 evo_res no_l.zip l.zip evo_res no_l.zip l.zip -v 输出相关指令 evo_res no_l.zip l.zip -p evo_res no_l.zip l.zip -p --plot_markers evo_res no_l.zip l.zip --save_plot ./plot.pdf evo_res no_l.zip l.zip --serialize_plot ./s…

利用冒泡排序了解如何将数组作为参数传递给函数

目录 前言:冒泡排序简介步骤动图演示 错误的冒泡排序函数数组名正确的冒泡排序函数 前言:冒泡排序 简介 冒泡排序是一种简单直观的排序算法。 它重复地访问要排序的数&#xff0c;一次比较两个元素&#xff0c;如果他们的顺序错误就把他们交换过来。访问数需要重复地进行直到…

js 生成分享码或分享口令

代码 function getShareToken(length) {var characters ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789;var shareToken ;for (var i 0; i < length; i) {var randomIndex Math.floor(Math.random() * characters.length);var randomChar character…

Server check fail, please check server xxx.xxx.xxx.xxx,port 9848 is available

记录一次服务调用中的错误 背景&#xff1a;我使用了nacos2.x的版本&#xff0c;同时在同一台服务器的三个docker容器中部署了nacos1、2、3&#xff0c;并将它们连接到了同一个docker网络 错误&#xff1a;Server check fail, please check server xxx.xxx.xxx.xxx,port 9848 …

每日一练【长度最小的子数组】

一、题目描述 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 二、题目解析 经…

家用儿童床欧盟CE认证EN716标准

一、标准适用范围 该标准规定了内部长度大于900mm但不超过1400mm的家用童床的安全要求。该安全要求适用于完全组装完毕待用的童床。可以转换成其它产品的童床&#xff08;如&#xff1a;可变产品、游戏床&#xff09;转换后应该符合相关欧洲标准。该标准不适用于提篮、婴儿床和…

用docker创建jmeter容器,如何实现性能测试?

用 docker 创建 jmeter 容器, 实现性能测试 我们都知道&#xff0c;jmeter可以做接口测试&#xff0c;也可以用于性能测试&#xff0c;现在企业中性能测试也大多使用jmeter。docker是最近这些年流行起来的容器部署工具&#xff0c;可以创建一个容器&#xff0c;然后把项目放到…

跨境独立站优势包括哪些?是否值得做呢?

跨境独立站的优势主要包括&#xff1a; 自主品牌建设&#xff1a;独立站可以更好地展示自主品牌形象&#xff0c;提高品牌知名度和美誉度。 独立域名&#xff1a;独立站可以拥有自己的域名&#xff0c;更加稳定和可信。 自主运营&#xff1a;独立站可以自主运营&#xff0c;包…

排序的简单理解(下)

4.交换排序 基本思想&#xff1a;所谓交换&#xff0c;就是根据序列中两个记录键值的比较结果来对换这两个记录在序列中的位置 交换排序的特点是&#xff1a;将键值较大的记录向序列的尾部移动&#xff0c;键值较小的记录向序列的前部移动。 4.1 冒泡排序 冒泡排序&#xff08…

Python图像转PDF神器:教你一步到位实现自动化处理

什么是 img2pdf 库&#xff1f; img2pdf 是一个 Python 库&#xff0c;它可以让你轻松地把多张图像转换为 PDF 文件。它支持多种图像格式&#xff0c;如 JPG, PNG, GIF, BMP 等&#xff0c;并且可以自动调整图像的大小和方向&#xff0c;以适应 PDF 的页面大小和方向。它还可以…

剑指offer(C++)-JZ49:丑数(算法-其他)

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 题目描述&#xff1a; 把只包含质因子2、3和5的数称作丑数&#xff08;Ugly Number&#xff09;。例如6、8都是丑数&#xff0c;…

鸿蒙开发之状态管理@State

1、视图数据双向绑定 鸿蒙开发采用的声明式UI&#xff0c;利用状态驱动UI的更新。其中State被称作装饰器&#xff0c;是一种状态管理的方式。 状态&#xff1a;指的是被装饰器装饰的驱动视图更新的数据。 视图&#xff1a;是指用户看到的UI渲染出来的界面。 之所以成为双向…

量化交易与人工智能:Python库的应用与效用

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 量化交易简介 量化交易是一种利用计算机算法执…

gdb使用

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟练掌握gdb的使用 > 毒鸡汤&#xff1a;这个世…

arkts编译报错-arkts-limited-stdlib错误【Bug已完美解决-鸿蒙开发】

文章目录 项目场景:问题描述原因分析:解决方案:适配指导案例此Bug解决方案总结项目场景: arkts编译报错-arkts-limited-stdlib错误。 我用Deveco studio4.0 beta2开发应用,报arkts-limited-stdlib错误 报错内容为: ERROR: ArKTS:ERROR File: D:/prRevivw/3792lapplica…

排序算法:【选择排序]

一、选择排序——时间复杂度 定义&#xff1a;第一趟排序&#xff0c;从整个序列中找到最小的数&#xff0c;把它放到序列的第一个位置上&#xff0c;第二趟排序&#xff0c;再从无序区找到最小的数&#xff0c;把它放到序列的第二个位置上&#xff0c;以此类推。 也就是说&am…

Shell函数数组练习

1、编写函数&#xff0c;实现打印绿色OK和红色FAILED&#xff0c;判断是否有参数&#xff0c;存在为Ok&#xff0c;不存在为FAILED [rootshell ~]# vim ok.sh #!/bin/bash read -p "请输入一个参数:" i function ok…

FFmpeg之AVHWAccel

这也是ffmpeg解码器中比较重要的一个模块&#xff0c;很多人认识它应该是通过一条命令 ffmpeg -hwaccel cuda -hwaccel_output_format cuda -i input.mp4 -c:v h264_nvenc -b:v 5M output.mp4命令地址&#xff1a;英伟达ffmpeg 大家可能觉得这就是nvcodec了&#xff0c;后来发…

域渗透之Exchange

域内部署Exchange 首先这里环境的话是&#xff1a; DC: win2012 exchange服务器: win2012 exchange 2016首先我们去装win2012虚拟机的时候需要给两个网卡&#xff0c;一个是内网&#xff0c;一个是外网的网卡。 内网的dns设置为域控的IP。 外网就不需要指定ip了。 首先需要…