【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;
              }
            }
          }

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

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

相关文章

锁--07_1----插入意向锁-Insert加锁过程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 插入意向锁MySQL执行插入Insert时的加锁过程MySQL官方文档MySQL insert加锁流程1.加插入意向锁2.判断插入记录是否有唯一键3. 插入记录并对记录加X锁插入意向锁----…

基于单片机的智能导盲杖设计 (论文+源码)

1. 系统设计 应用STC89C52单片机微处理器进行研究一种智能手杖系统&#xff0c;需要同时实现超声波自动测距、语音自动报警、距离自动显示、电机震动报警、LED指示灯灯光明灭自动提醒等多种功能&#xff0c;在手机通信提醒模式下手机用户可拨打固定手机电话信号实现手机通信提…

RabbitMQ插件详解:rabbitmq_message_timestamp【Rabbitmq 五】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 RabbitMQ时空之旅&#xff1a;rabbitmq_message_timestamp的奇妙世界 前言什么是rabbitmq_message_timestamprabbitmq_message_timestamp 的定义与作用&#xff1a;如何在 RabbitMQ 中启用消息时间戳&…

【setDS】牛客小白月赛83 E

登录—专业IT笔试面试备考平台_牛客网 题意 思路 首先&#xff0c;一个必要步骤是把它转化为两个序列&#xff0c;这样就变成了一个序列DS问题 我们的答案是一个位置 pos 后面还有多少位置和这个位置的颜色相同&#xff0c;考虑得到这个答案我们需要维护什么东西 我们只需要…

Knife4j 接口文档如何设置 Authorization 鉴权参数?

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

uniapp实现检查版本检测,更新

1.首先需要获取当前app的版本 const systemInfo uni.getSystemInfoSync();// 应用程序版本号// #ifdef APPme.version systemInfo.appWgtVersion;// #endif// #ifdef H5me.version systemInfo.appVersion;// #endif2.在获取到服务器保存的app版本 3.点击按钮验证版本号 //…

每天五分钟计算机视觉:Inception网络是由多个Inception模块构成

本文重点 inception从另一种角度来提升训练结果:能更高效的利用计算资源,在相同的计算量下能提取到更多的特征,从而提升训练结果。可以简单的理解为Inception 网络是由一个一个的Inception模块构建成的,我们来看一下。 Inception模块 如上就是Inception模块的 通过一个1…

【AI美图】第03期效果图,AI人工智能全自动绘画,二次元美图欣赏

带来一组二次元人工智能自动绘图 对比分析&#xff1a; 标题手画二次元需要技巧&#xff1a; 二次元高清图片的绘制技巧主要包括以下几点&#xff1a; 线条的运用&#xff1a;在二次元风格的绘画中&#xff0c;线条的运用非常重要。要绘制出流畅、细腻的线条&#xff0c;需…

人工智能计算机视觉:解析现状与未来趋势

导言 随着人工智能的迅速发展&#xff0c;计算机视觉技术逐渐成为引领创新的关键领域。本文将深入探讨人工智能在计算机视觉方面的最新进展、关键挑战以及未来可能的趋势。 1. 简介 计算机视觉是人工智能的一个重要分支&#xff0c;其目标是使机器具备类似于人类视觉的能力。这…

【Spring教程29】Spring框架实战:从零开始学习SpringMVC 之 服务器响应知识全面详解

目录 1 环境准备2 响应页面3 返回文本数据4 响应JSON数据5 知识点总结 欢迎大家回到《Java教程之Spring30天快速入门》&#xff0c;本教程所有示例均基于Maven实现&#xff0c;如果您对Maven还很陌生&#xff0c;请移步本人的博文《如何在windows11下安装Maven并配置以及 IDEA配…

Java开发工具积累(符合阿里巴巴手册规范)

文章目录 一、命名规约二、集合篇1. 栈、队列、双端队列2. List的升序倒序3. Map的升序降序4. 二维数组排序5. 集合之间的转换6. Map键值对遍历 三、并发篇1. 创建线程池2. ThreadLocal的使用 四、时间篇1. LocalDateTime的使用2. String、Date、LocalDateTime转换 五、控制块1…

文件上传自动化测试方案(超详细)

一、概述 【测试地址】&#xff1a;https://pan.baidu.com 【测试工具】&#xff1a;selenium、requests 【脚本语言】&#xff1a;Python 【运行环境】&#xff1a;Windows 百度网盘作为文件存储及分享的平台&#xff0c;核心功能大部分是对文件的操作&#xff0c;如果要…

【单调栈】【区间合并】LeetCode85:最大矩形

作者推荐 【动态规划】【广度优先搜索】LeetCode:2617 网格图中最少访问的格子数 本文涉及的知识点 单调栈 区间合并 题目 给定一个仅包含 0 和 1 、大小为 rows x cols 的二维二进制矩阵&#xff0c;找出只包含 1 的最大矩形&#xff0c;并返回其面积。 示例 1&#xff1…

黑马头条--day01.环境搭建

一.前言 该项目学习自黑马程序员&#xff0c;由我整理如下&#xff0c;版权归黑马程序员所有 二.环境搭建 1.数据库 第一天&#xff0c;先创建如下库和表: sql文件如下: CREATE DATABASE IF NOT EXISTS leadnews_user DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_…

VBA快速填充缺失数据

实例需求&#xff1a;数据表中F列中存在数据缺失&#xff0c;如下图所示。现需要根据A列中的内容&#xff08;类别&#xff0c;图中C1、C2、B1为不同类别&#xff09;&#xff0c;补充F列数据&#xff0c;已知每个类别中F列存在不少于一个非空单元格&#xff0c;并且其内容相同…

OpenAI发布了一份提示工程指南(Prompt Engineering Guide)

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版&#xff0c;欢迎购买。点击进入详情 Open AI 发布了一份很棒的提示工程指南。 以下是在 GPT-4 使用提示时获得更好结果的 6 种策略的总结:

机器学习算法---回归

1. 线性回归&#xff08;Linear Regression&#xff09; 原理&#xff1a; 通过拟合一个线性方程来预测连续响应变量。线性回归假设特征和响应变量之间存在线性关系&#xff0c;并通过最小化误差的平方和来优化模型。优点&#xff1a; 简单、直观&#xff0c;易于理解和实现。…

瑞友天翼应用虚拟化系统 多处SQL 注入漏洞复现(可RCE)

0x01 产品简介 瑞友天翼应用虚拟化系统是西安瑞友信息技术资讯有限公司研发的具有自主知识产权,基于服务器计算架构的应用虚拟化平台。它将用户各种应用软件集中部署在瑞友天翼服务器(群)上,客户端通过WEB即可快速安全的访问经服务器上授权的应用软件,实现集中应用、远程接…

vue中iframe标签跨域通信——父子页面之间传值(解决子页面收不到父页面的值或子页面收到的数据为undefined的问题)

背景 因为本系统需要支持第三方系统页面的嵌入&#xff0c;于是尝试使用iframe标签&#xff0c;进行跨域通信&#xff0c;父子页面相互传值。初始化时&#xff0c;父页面发送数据给子页面&#xff0c;需要在子页面加载完成后发送&#xff0c;不然接收不到数据。父页面直接给子页…

js 高阶(含vue.js)

1、主动触发函数 this.$options.watch.watchOrdersFormPrice.apply(this);//主动触发watchOrdersFormPrice watch:{watchOrdersFormPrice: function(){if( !this.ordersForm.alone_sold_price && this.ordersForm.ginfo.goods_id ){var price_info this.ordersForm.…