如何使用css实现一个加载动画

如何使用css实现一个加载动画 有四个点 初始化为同一个颜色 每个阶段 不同的透明度 刷新也不会影响初始化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<div class="loading-container"><div class="loading-dot dot1"></div><div class="loading-dot dot2"></div><div class="loading-dot dot3"></div><div class="loading-dot dot4"></div>
</div>
</body>
<style>/*加载动画开始*/.loading-container {padding: 5px 0;position: relative;}.loading-dot {width: 7px;height: 7px;border-radius: 50%;margin: 0 3px;background: #327eff;animation: loading 3s  infinite;float: left;}.dot1 {animation-delay: -1.5s;}.dot2 {animation-delay: -1s;}.dot3 {animation-delay: -0.5s;}.dot4 {animation-delay: 0s;}@keyframes loading {0% {opacity: 0.25;}50% {opacity:1;}100% {opacity: 0.25;}}/*加载动画结束*/
</style>
</html>

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

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

相关文章

List 集合遍历过程中删除元素避坑指南。

文章目录 1. 遍历2. 遍历过程中删除元素2.1 for 简单循环正向遍历方式2.2 for 简单循环反向遍历方式2.3 foreach 方式遍历删除2.4 Iterator的remove()方法2.5 <font color green> removeIf() &#xff08;推荐&#xff09;<green>2.6 Strem 方式 作为一名后端开发…

python之计算CPI

CPI&#xff0c;即消费者物价指数&#xff08;Consumer Price Index&#xff09;&#xff0c;是一个反映居民家庭一般所购买的消费品和服务项目价格水平变动情况的宏观经济指标。它是在特定时段内度量一组代表性消费商品及服务项目的价格水平随时间而变动的相对数&#xff0c;通…

网络测试相关

前言 网络测试通常是指在网络环境比较复杂&#xff0c;而且有较多限制时&#xff0c;就需要清楚网络的走向和途径的节点&#xff0c;便于在出现问题时进行排查和优化网络性能&#xff0c;相关知识大多是计算机网络的 测试工具 抓包 wireshark 路由探测 traceroute/tracert 这…

云快充充电桩系统设计书

充电桩系统设计书 一、系统设计概述 随着新能源汽车市场的快速发展&#xff0c;充电桩作为电动汽车的重要配套设施&#xff0c;其市场需求日益增长。本系统旨在提供一套稳定、高效、易用的充电桩解决方案&#xff0c;以满足市场上新能源充电桩的主流需求。通过实现云快充V1.6协…

nginx使用详解--动静分离

什么是动静分离&#xff1f; 为了提高网站的响应速度&#xff0c;减轻程序服务器&#xff08;Tomcat&#xff0c;Jboss等&#xff09;的负载&#xff0c;对于静态资源&#xff0c;如图片、js、css等文件&#xff0c;可以在反向代理服务器中进行缓存&#xff0c;这样浏览器在请…

如何选择激活函数?

选择神经网络的激活函数是一个重要的决策&#xff0c;因为激活函数的选择会影响到网络的收敛速度以及能否有效地训练。不同的激活函数适用于不同的任务和网络架构。以下是选择激活函数时可以考虑的一些指导原则和常用的激活函数&#xff1a; 指导原则 问题类型&#xff1a; 二…

LLM小记

RAG 参考 检索增强生成(RAG)概念及优化 主流模型 llama系列 1. 背景&#xff1a;模型参数量级的积累&#xff0c;或者训练数据的增加&#xff0c;哪个对性能提升帮助更大&#xff1f; 最近的 “Training Compute-Optimal Large Language Models” 这篇论文提出一种缩放定…

Java:PDF图片抽取的两种方法

图片和PDF是我们日常生活和工作中经常接触到的文档格式。PDF是人们日常使用最多的跨平台文档&#xff0c;是一种用独立于应用程序、硬件、操作系统的方式呈现文档的文件格式。每个PDF文件包含固定布局的平面文档的完整描述&#xff0c;包括文本、字形、图形及其他需要显示的信息…

如何利用HubSpot海外获客系统实现海外市场扩张?

在当今全球化的时代&#xff0c;企业面临着越来越激烈的竞争&#xff0c;而海外市场则被视为获取更多增长机会的重要途径之一。针对这一挑战&#xff0c;企业需要建立一个完整的海外获客系统&#xff0c;而HubSpot软件的应用则成为了关键。作为HubSpot的合作伙伴&#xff0c;我…

librtmp源码分析

阅读了librtmp的源码&#xff0c;简单记录下。 首先补充下AMF格式基本知识 1 AMF格式 AMF是Action Message Format(动作消息格式)的简写&#xff0c;它是一种二进制的数据格式。它的设计是为了把actionscript里面的数据(包括Object, Array, Boolean, Number等)序列化成二进制…

jvm 基础知识和jvm 调优

类装载分为以下 5 个步骤&#xff1a; 加载&#xff1a;根据查找路径找到相应的 class 文件然后导入&#xff1b; 检查&#xff1a;检查加载的 class 文件的正确性&#xff1b; 准备&#xff1a;给类中的静态变量分配内存空间&#xff1b; 解析&#xff1a;虚拟机将常量池中的符…

C# 异步返回类型详解

在现代软件开发中&#xff0c;异步编程已经成为一种重要的编程范式&#xff0c;尤其是在需要与I/O密集型操作交互的上下文中&#xff0c;比如网络请求、数据库操作等。C# 语言提供了强大的异步支持&#xff0c;使得异步编程变得更加简单和直观。本文将详细介绍C#中异步返回类型…

vue3学习 【5】watch的使用

什么是watch 当我们需要根据一个数据的变化来进行一些操作的时候我们需要使用侦听器&#xff0c;它能够在响应式数据发生变化的时候触发提供的回调函数 基础侦听 watch 可以侦听不同的数据源。例如&#xff1a; ref计算属性响应式对象getter函数多个数据源组层的数据 cons…

20240229金融读报:央行阿拉善创新融资模式与碳排放权交易条例实施,新春政策聚焦新生产力及金融风险防范

1、人民银行阿拉善盟分行实例&#xff1a;再贷款产业链&#xff08;活体牲畜抵押贷款牲畜死亡率保险&#xff09;、“再贷款新型农牧业经营主体”&#xff08;基础设施薄弱、产业结构单一&#xff0c;筹集资金创办嘎查集体经济股份合作社贷款&#xff09; 2、建设银行实例&…

oracle11安装及使用

安装oracle11 官网下载地址 Oracle Database 11g Release 2 for Microsoft Windows (x64) 官网下载慢可访问我的资源 也可以网盘获取 链接&#xff1a;https://pan.baidu.com/s/1RDrGkqDA7tfKRnpJXUBMDw 提取码&#xff1a;z3na 上传安装包到服务器 在指定目录下创建文件…

adb命令

1. 常用命令&#xff1a; adb devices #查看连接设备adb -s cf27456f shell # 指定连接设备使用命令adb install test.apk # 安装应用adb install -r demo.apk #安装apk 到sd 卡&#xff1a;adb uninstall cn.com.test.mobile #卸载应用&#xff0c;需要指定包adb uninstall -…

Windows系统x86机器安装龙芯(loongarch64)3A5000虚拟机系统详细教程

本次介绍在window系统x86机器上安装loongarch64系统的详细教程。 1.安装环境准备。 首先&#xff0c;你得有台电脑。 配置别太差&#xff0c;至少4核8G内存&#xff0c;安装window10或者11都行&#xff08;为啥不能是Window7&#xff0c;你要用也不是不行&#xff0c;你先解决…

leetcode:860.柠檬水找零

题意&#xff1a;按照支付顺序&#xff0c;进行支付&#xff0c;能够正确找零。 解题思路&#xff1a;贪心策略&#xff1a;针对支付20的客人&#xff0c;优先选择消耗10而不是消耗5&#xff0c;因为5可以用来找零10或20. 代码实现&#xff1a;有三种情况&#xff08;代表三种…

vscode中使用python的cv2.imread()读取图片为None

这是之前的代码&#xff1a; import cv2img_path c:\\Users\\LENOVO\\Desktop\\QQ截图20240228234801.jpg print(img_path) print(cv2.__version__)img cv2.imread(img_path) print(img)运行结果&#xff1a; c:\Users\LENOVO\Desktop\QQ截图20240228234801.jpg 3.4.1 None…

Linux下主线程 return 0 和 pthread_exit(NULL) 的区别

1. 背景 在Linux环境下&#xff0c;主线程以return 0结束时&#xff0c;程序会在主线程运行完毕后结束。而当主线程以pthread_exit(NULL)作为返回值时&#xff0c;主线程会等待子线程结束后才会退出程序。本文将详细探讨这两种方式的区别&#xff0c;并提供相应的代码示例。 …