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

CSS简单实用的加载动画、骨架屏有效果图

news 来源：原创 2025/7/5 9:52:09

效果图

请添加图片描述

.wxml

<!-- 骨架屏 -->
<view wx:for="{{skeleton}}" wx:key="index" class="container center" style="--w:{{item.w}}rpx;--h:{{item.h}}rpx" />
<!-- 加载 -->
<view class="arco-loading center"><view wx:for="{{5}}" wx:key="index" class="arco-loading-item" />
</view>
<!-- 圆 -->
<view class="preloader"><view />
</view>

.wxss

page{text-align: center;
}
.center{margin: 0 auto 100rpx;
}
/* 骨架屏 */
.container{width: var(--w);height: var(--h);background: linear-gradient(90deg,#F2F3F5 25%,#E5E6EB 37%,#F2F3F5 63%);background-size: 400% 100%;animation:skeleton 1.5s cubic-bezier(0,0,1,1) infinite;
}
@keyframes skeleton {from{ background-position:100% 50%; }to{ background-position: 0 50%; }
}
/* 加载 */
.arco-loading{position: relative;width: 102rpx;height: 16rpx;transform-style: preserve-3d;perspective: 400rpx;
}
.arco-loading-item{position: absolute;top: 0;left: 50%;width: 16rpx;height: 16rpx;border-radius: 50%;background: #165DFF;transform: translate(-50%) scale(0);animation: arco 2s cubic-bezier(0,0,1,1) infinite forwards;
}
.arco-loading-item:nth-child(2) {background-color: #306FFF;animation-delay: .4s
}.arco-loading-item:nth-child(3) {background-color: #1D4DD2;animation-delay: .8s
}.arco-loading-item:nth-child(4) {background-color: #466ACB;animation-delay: 1.2s
}.arco-loading-item:nth-child(5) {background-color: #5D7CCB;animation-delay: 1.6s
}
@keyframes arco{0% {transform: translate3D(-48%,0,-2rpx) scale(0.5)}22%{transform: translate3D(-280%,0,0) scale(1.25)}44%{transform: translate3D(-48%,0,2rpx) scale(2)}47%{transform: translateZ(2rpx) scale(2)}50% {transform: translate3D(48%,0,2rpx) scale(2)}72%{transform: translate3D(280%,0,0) scale(1.25)}94%{transform: translate3D(48%,0,-2rpx) scale(0.5)}97% {transform: translateZ(-2rpx) scale(0.5)}
}
/* 圆 */
.holder{width: 100%;float: left;height: 120upx;text-align: center;display: flex;align-items: center;position: relative;
}
.preloader {position: relative;width: 72rpx;height: 0%;padding-bottom: 72rpx;left: 50%;top: 36rpx;transform: translateX(-50%) translateY(-50%);
}
.preloader view {position: absolute;width: 100%;height: 100%;left: 50%;transform: translateX(-50%) translateY(-50%);overflow: hidden;animation: animatePreloader 0.7s infinite linear;transform-origin: 50% 100%;
}
.preloader view:before {content: "";position: absolute;width: 100%;height: 100%;left: 50%;top: 50%;transform: translateX(-50%);border: 1px solid #FF0505;border-radius: 50%;box-sizing: border-box;
}
@keyframes animatePreloader {0% {transform: translateX(-50%) translateY(-50%) rotateZ(0deg);}100% {transform: translateX(-50%) translateY(-50%) rotateZ(360deg);}
}

.js

Page({data: {skeleton:[{w:100,h:100},{w:500,h:100},{w:300,h:60},]},
})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。

CSS简单实用的加载动画、骨架屏有效果图

效果图 .wxml  <view wx:for"{{skeleton}}" wx:key"index" class"container center" style"--w:{{item.w}}rpx;--h:{{item.h}}rpx" />  <view class"arco-loading center&quo…...

编程日记 2025/7/5 9:52:09

图论算法体系：并查集、生成树、排序与路径搜索全解析

从图论的基础理论入门，到深搜广搜搭建起图论的骨架。从并查集到最小生成树，从拓扑排序到最短路径。 .... 群星璀璨😉 并查集最小生成树 Prim算法Kruskal算法拓扑排序（kahn算法）最短路径 Dijkstra算法 Dijkstra朴素Di…...

编程日记 2025/7/5 9:34:24

OpenAI为何觊觎Chrome？AI时代浏览器争夺战背后的深层逻辑

目录引言：一场蓄谋已久的"蛇吞象"计划一、Chrome：数字世界的"黄金入口" 1.1 用户规模对比：ChatGPT与Chrome的悬殊差距 1.2 Chrome的生态价值远超浏览器本身二、OpenAI的"入口焦虑"与战略布局 2.1 AI时…...

编程日记 2025/7/5 7:50:26

DrissionPage 请求一次换一个代理（不重启chrome）

实现原理：通过插件实现 # !/usr/bin/python3 # -*- coding:utf-8 -*- """ author: JHC000abcgmail.com file: switch_ip.py time: 2025/4/23 22:05 desc:"""R""" 1. chrome s商店下载Proxy SwitchyOmega 3 (ZeroOme…...

编程日记 2025/6/29 10:56:11

JBoltAI 赋能金融文档：基于 RAG 的基金招募说明书视觉增强方案

在金融领域，基金招募说明书是投资者了解基金产品关键信息的重要文件。然而，这类文件通常以 PDF 格式呈现，内容繁杂、文本枯燥，对于普通投资者而言，理解起来存在一定难度。而如何利用 AI 技术对这类枯燥文本进行视觉增强…...

编程日记 2025/6/29 11:39:06

【玩转全栈】—— Django+vue3+讯飞星火API 实现前端页面实时AI答复

技术栈：vue3 element-plus axios pinia router Django5 websocket 讯飞星火API 本文将实现一个 AI 聊天对话功能，将前端用户输入问题以及之前对话发送给后端，通过 api 访问大模型，返回前端实时对话数据。调用讯飞星火API…...

编程日记 2025/6/29 9:23:11

1.1 java开发的准备工作（入门）

准备工作一.JDK 开始写java程序之前需要安装jdk jdk是java开发工具，包含着JRE和里面的JVM(虚拟机，可以使得不同环境下都能运行Java程序)，和开发工具。二.了解写程序的三大步骤步骤 java成功运行主要需要经过代码编写，编译&a…...

编程日记 2025/6/29 11:29:14

上一篇 --- 网络基础概念（下）https://blog.csdn.net/Small_entreprene/article/details/147320155?fromshareblogdetail&sharetypeblogdetail&sharerId147320155&sharereferPC&sharesourceSmall_entreprene&sharefromfrom_link 理…...

编程日记 2025/6/29 9:47:38

根据定义给出json_schema:

根据您提供的智能体定义，以下是符合JSON Schema Draft-07规范的完整架构描述（包含中文注释说明）： {"$schema": ""title": "智能体架构规范","type": "object","req…...

编程日记 2025/6/29 10:52:13

深入微服务核心：从架构设计到规模化

作者：腾讯云开发者原文：深入微服务核心：从架构设计到规模化 01 微服务什么是微服务？ 微服务就是一些协同工作的小而自治的服务。我们在一个单体系统中，通常会采用一些抽象层或者模块来保证代码的内聚性&#xff0c…...

编程日记 2025/6/29 11:57:14

linux与c语言基础知识（未全部完成）

文章很多处理论，没办法写出来，（linux的一些理论问题，我有时间后，会逐个解决） 文章大多数的理论来字这个链接， C语言快速入门-C语言基础知识-CSDN博客一. linux（Ubuntu） …...

编程日记 2025/6/29 11:46:02

【专题刷题】滑动窗口（四）：

📝前言说明： 本专栏主要记录本人的基础算法学习以及LeetCode刷题记录，按专题划分每题主要记录：（1）本人解法本人屎山代码；（2）优质解法优质代码；&#xff…...

编程日记 2025/6/29 9:25:42

小白自学python第一天

学习python的第一天一、常用的值类型（先来粗略认识一下~） 类型说明数字（number）包含整型（int）、浮点型（float）、复数（complex）、布尔（boolean&…...

编程日记 2025/6/29 12:26:33

Redis 服务自动开启、设置密码和闪退问题

一、Redis 服务自动开启 1、以管理员身份运行命令提示符右键点击“命令提示符”图标，选择“以管理员身份运行”。 2、注册为 Windows 服务 redis-server --service-install 3、启动服务 redis-server --service-start 4、测试 Redis 连接 redis-cli ping …...

编程日记 2025/6/29 12:29:46

2025年渗透测试面试题总结-拷打题库14（题目+回答）

网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录 2025年渗透测试面试题总结-拷打题库14 1. WAF存在的意义 2. 威胁感知能力衡量指标 3. 感知规则有效性…...

编程日记 2025/6/29 10:44:30

java后端开发day35--集合进阶（四）--双列集合：MapHashMapTreeMap

（以下内容全部来自上述课程） 1.双列集合 1.1 特点双列集合一次需要存一对数据，分别为键和值键不能重复，值可以重复键和值是一一对应的，每一个键只能找到自己对应的值键值这个整体，我们称之为“键值对”…...

编程日记 2025/6/29 9:23:33

进行网页开发时，怎样把function（）中变量值在控制台输出，查看?

在网页开发过程中，为了及时了解JavaScript中的function函数中的变量值，可以用控制台命令console.log()把变量的值在控制台输出，方便调试时对函数变量值进行了解。看下面的一段示例： <!DOCTYPE html> <html> &l…...

编程日记 2025/6/29 11:45:40

【计算机网络】现代网络技术核心架构与实战解析

目录前言技术背景与价值当前技术痛点解决方案概述目标读者说明一、技术原理剖析核心概念图解核心作用讲解关键技术模块说明技术选型对比二、实战演示环境配置要求核心代码实现案例1：TCP服务端/客户端通信案例2：Wireshark抓包分析三、性能对比测试方法…...

编程日记 2025/6/29 11:57:47

Python内置函数---bool()

用于将任意对象转换为布尔值（True或False） 1. 基本语法与参数 bool(x) - 参数：x为可选参数，可以是任意Python对象（如数值、字符串、列表、自定义对象等）。 - 返回值：根据x的真值性返回True或Fa…...

编程日记 2025/6/29 11:12:23

Vue 3中如何封装API请求：提升开发效率的最佳实践

在现代前端开发中，API请求是不可避免的一部分，尤其是与后端交互时。随着Vue 3的广泛应用，如何高效地封装API请求，既能提升代码的可维护性，又能确保代码的高复用性，成为了很多开发者关注的话题。在本文中&…...

编程日记 2025/6/29 11:43:50

【Redis】redis主从哨兵

Redis 主从复制在访问量极高的场景下，单台 Redis 已难以承载所有请求，且单点故障风险高。通过主从复制，可以实现读写分离、数据备份与高可用。概念主节点（Master）：负责写操作，将数据变更同…...

编程日记 2025/6/29 10:50:44

16.第二阶段x64游戏实战-分析二叉树结构

免责声明：内容仅供学习参考，请合法利用知识，禁止进行违法犯罪活动！ 本次游戏没法给内容参考于：微尘网络安全上一个内容：15.第二阶段x64游戏实战-分析怪物血量（遍历周围） 首先通…...

编程日记 2025/6/29 10:57:59

vue | 不同 vue 版本对复杂泛型的支持情况 · vue3.2 VS vue3.5

省流总结：defineProps 的泛型能力，来直接推导第三方组件的 props 类型引入第三方库的类型，并直接在 <script setup> 中作为 props 使用。这种类型一般是复杂泛型（包含联合类型、可选属性、交叉类型、条件类型等&#xff0…...

编程日记 2025/6/29 10:02:37

OpenGL学习笔记（Blinn-Phong、伽马矫正、阴影）

目录 Blinn-PhongGamma矫正GammaGamma矫正实现方法sRGB纹理衰减阴影shadow mapping渲染阴影改进阴影贴图PCF GitHub主页：https://github.com/sdpyy1 OpenGL学习仓库:https://github.com/sdpyy1/CppLearn/tree/main/OpenGLtree/main/OpenGL):https://github.com/sdp…...

编程日记 2025/7/4 5:48:21

GPLT-2025年第十届团体程序设计天梯赛总决赛题解(2025天梯赛题解,266分)

今天偶然发现天梯赛的代码还保存着，于是决定写下这篇题解，也算是复盘一下了 L1本来是打算写的稳妥点，最后在L1-6又想省时间，又忘记了insert，replace这些方法怎么用，也不想花时间写一个文件测试&#xff0c…...

编程日记 2025/6/29 10:29:13

day4 pandas学习

%pip install openxyxl 找一个自己觉得有意思的文件。我找的是成绩单来玩。这节学的比较耗时了，大概用了60分钟。 import pandas as pd data2 pd.read_csv(rD:\python代码区\代码随想录挑战-调试区\python训练营\1_计算类专业分流学生成绩排名.csv) #print(data)…...

编程日记 2025/6/29 10:03:12

【Java学习笔记】循环结构

循环结构一、for循环 for循环结构 for(循环变量初始化;循环条件;循环变量迭代){循环操作（可以多条语句） }for循环写死循环 for(;;){语句 }注意点：循环变量的初始化在for语句内，属于是局部变量，在全局中会出现未定义…...

编程日记 2025/6/29 9:23:21

URP-UGUI交互功能实现

一、非代码层面实现交互（SetActive） Button ：在OnClick（）中添加SetActive方法（但是此时只首次有效） Toggle ：在OnClick（）中添加动态的SetActive方法 &#…...

编程日记 2025/6/29 12:22:28

08-IDEA企业开发工具-集成AI插件通义灵码

需要登陆才可使用！！！ 1. 安装AI编程插件找到插件: 在IDEA的设置中，找到插件（Plugins）部分。安装插件: 搜索“通义灵码”，找到后点击安装（Install），接受条款…...

编程日记 2025/6/29 10:23:51

解决报错：this[kHandle] = new _Hash(algorithm, xofLen)；

前端项目编译报错： node:internal/crypto/hash:68this[kHandle] new _Hash(algorithm, xofLen);^Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:68:19)at Object.createHash (node:crypto:138:10)at modu…...

编程日记 2025/6/29 10:14:43

使用 Streamlit 打造一个简单的照片墙应用

在现代 web 开发中，快速构建交互式应用是一项重要的技能。Streamlit 是一个强大的 Python 库，允许开发者以最小的代码量创建美观且功能丰富的 web 应用。今天，我们将通过分析一段简单的 Streamlit 代码，展示如何构建一个照片墙应用…...

编程日记 2025/6/29 9:23:19

深度学习优化器和调度器的选择和推荐

一、常用优化器对比 1. 随机梯度下降（SGD） 原理：每次迭代使用小批量数据计算梯度并更新参数。优点：实现简单，适合大规模数据集。缺点：收敛速度慢，容易陷入局部最优或鞍点。适用场景&#xff1…...

编程日记 2025/6/29 11:39:14

“时间”，在数据处理中的真身——弼马温一般『无所不能』（DeepSeek）

电子表格时间处理真理：数值存储最瘦身，真身闯关通四海。笔记模板由python脚本于2025-04-23 22:25:59创建，本篇笔记适合喜欢在电子表格中探求时间格式的coder翻阅。【学习的细节是欢悦的历程】博客的核心价值：在于输出思考与经验…...

编程日记 2025/6/29 1:38:54

为什么Spring中@Bean注解默认创建单例Bean

在Spring框架中，使用Bean注解定义的对象默认确实是单例的，这是由Spring容器的设计哲学和实际需求决定的。下面我从多个角度解释这一设计选择的原因和机制。 1. Spring Bean作用域基础 Spring定义了多种Bean作用域，其中默认是单例(Singleton…...

编程日记 2025/6/29 12:20:43

GPLT-2025年第十届团体程序设计天梯赛总决赛题解(2025天梯赛题解，共计266分)

编程日记 2025/6/29 10:59:47

JDK（Ubuntu 18.04.6 LTS）安装笔记

一、前言本文与【MySQL 8（Ubuntu 18.04.6 LTS）安装笔记】同批次：先搭建数据库，再安装JDK，后面肯定就是部署Web应用：典型的单机部署。“麻雀虽小五脏俱全”，善始善终，还是记下来吧。…...

编程日记 2025/6/28 18:24:22

Java 拦截器完全指南：原理、实战与最佳实践

一、引言拦截器的基本概念在现代 Java Web 开发中，拦截器（Interceptor）是一种用于在请求处理前后插入自定义逻辑的机制。简单来说，它是一种“横切逻辑处理器”，可以用来对请求进行预处理、后处理，甚至终…...

编程日记 2025/6/29 11:58:19

2025.04.23华为机考第二题-200分

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 02. 魔法彩灯森林问题描述在卢小姐的魔法花园中，有一棵神奇的彩灯树。这棵树的每个节点都装有一盏魔法灯，灯有三种颜色状态：红色（用数字1表示）、绿色（用数字2表示）和蓝色（…...

编程日记 2025/6/28 21:46:24

【Leetcode 每日一题】1399. 统计最大组的数目

问题背景给你一个整数 n n n。请你先求出从 1 1 1 到 n n n 的每个整数 10 10 10 进制表示下的数位和（每一位上的数字相加），然后把数位和相等的数字放到同一个组中。请你统计每个组中的数字数目，并返回数字数目并列最多的组…...

编程日记 2025/6/29 0:05:26

系统重装——联想sharkbay主板电脑

上周给一台老电脑重装系统系统，型号是lenovo sharkbay主板的电脑，趁着最近固态便宜，入手了两块长城的固态，装上以后插上启动U盘，死活进不去boot系统。提示 bootmgr 缺失，上网查了许久，终于解决了…...

编程日记 2025/6/28 23:17:58

Python数据清洗笔记（上）

一、数据清洗概述数据清洗是数据分析过程中至关重要的一步，约占整个数据分析过程的60%-80%的时间。主要包括处理缺失值、异常值、重复值、格式不一致等问题。二、常用工具主要使用Python的Pandas库进行数据清洗： import pandas as pd import nump…...

编程日记 2025/6/29 11:53:11

三、Python编程基础03

目录一、debug 调试的使用1. 打断点2. 右键 Debug 运行代码3. 单步执行代码,查看过程二、字符串1、定义与下标引用2、切片3、查找4、去除空白字符5、转换大小写与拆分6、其他方法-替换、连接、是否为纯数字7、登录案例优化三、列表 list1、列表基础操作2、案例： …...

编程日记 2025/6/29 12:14:07

西门子S7-200SMART 控制Profinet闭环步进MD-4250-PN (1)电机及专栏介绍

一、前言本系列是我继《西门子S7-1200PLC 控制步进电机 MD-4240-PN》系列专栏后，新开的一篇专栏。系列的主题围绕 S7-200SMART Profinet闭环步进(MD-4250-PN) 触摸屏的硬件，预计作四篇文章，分别为：专栏介绍、硬件介绍、PLC…...

编程日记 2025/6/29 11:54:41

NoSQL 简单讲解

目录 1. NoSQL 的背景与意义 1.1 数据库的演变 1.2 NoSQL 的兴起 2. NoSQL 数据库的分类 2.1 键值存储（Key-Value Stores） 2.2 文档数据库（Document Stores） 2.3 列族存储（Column-Family Stores） 2.…...

编程日记 2025/6/29 1:40:31

TCP 协议：原理、机制与应用

一、引言在当今数字化的时代，网络通信无处不在，而 TCP（Transmission Control Protocol，传输控制协议）作为互联网协议栈中的核心协议之一，扮演着至关重要的角色。无论是浏览网页、发送电子邮件还是进行文件…...

编程日记 2025/6/29 10:22:34

C++23 新特性：令声明顺序决定非静态类数据成员的布局 (P1847R4)

文章目录引言背景知识非静态类数据成员类的内存布局 P1847R4提案内容示例代码影响和优势提高代码的可预测性与其他语言和库的交互更加方便简化代码调试和优化编译器支持情况实际应用场景嵌入式系统开发跨语言编程内存优化总结引言在C的发展历程中，每一个新版…...

编程日记 2025/6/29 10:07:12

Java 环境配置详解（Windows、macOS、Linux）

Java 环境配置是学习和开发 Java 程序的第一步，也是至关重要的一步。一个正确配置的 Java 环境能够保证你的 Java 程序能够顺利编译、运行和调试。本文将详细介绍在 Windows、macOS 和 Linux 三种主流操作系统上配置 Java 环境的步骤，力求详尽、易懂&…...

编程日记 2025/6/29 5:36:03

ChatBEV：一种理解 BEV 地图的可视化语言模型

25年3月来自上海交大、上海AI实验室、同济大学和MAGIC的论文“ChatBEV: A Visual Language Model that Understands BEV Maps”。交通场景理解对于智能交通系统和自动驾驶至关重要，可确保车辆安全高效地运行。虽然 VLM 的最新进展已显示出整体场景理解的前景&…...

编程日记 2025/6/29 11:59:15

利用Python爬虫实现百度图片搜索的PNG图片下载

在图像识别、训练数据集构建等场景中，我们经常需要从互联网上批量下载图片素材。百度图片是中文搜索中最常用的来源之一。本文将介绍如何使用Python构建一个稳定、可扩展的百度图片爬虫，专门用于下载并保存高清PNG格式图片。一、项目目标本项目的目标…...

编程日记 2025/6/29 10:32:43

自主可控鸿道Intewell工业实时操作系统

鸿道Intewell工业实时操作系统是东土科技旗下科东软件自主研发的新一代智能工业操作系统，以下是相关介绍： 系统架构 -Intewell-C全实时构型：设备上只运行自研RTOS的全实时系统，适用于有功能安全认证需求的实时控制场景&#xf…...

编程日记 2025/6/29 9:23:13

效果图

.wxml

.wxss

.js

相关文章：