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

JS +CSS @keyframes fadeInUp 来定义载入动画

news 2026/5/24 0:08:32

JS+CSS 更完美展现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>跳动加载指示器</title><style>
body {font-family: Arial, sans-serif;padding: 20px;margin: 0;
}.content {height: 1000px;background-color: #f4f4f4;text-align: center;padding: 20px;
}.box {display: block;width: 300px;height: 150px;margin: 50px auto;background-color: lightcoral;color: white;text-align: center;line-height: 150px;font-size: 20px;border-radius: 8px;opacity: 1; /* 初始时不可见 */transform: translateY(50px); /* 初始位置偏移 */transition: all 1s ease-out;
}/* 定义出现动画 */
@keyframes fadeInUp {0% {opacity: 0;transform: translateY(50px);}100% {opacity: 1;transform: translateY(0);}
}.show {animation: fadeInUp 1s ease-out forwards;
}</style></head>
<body><div class="box"style="height: 300px; background-color: lightblue; margin-top: 500px;">这是第一个 DIV</div><div class="box">这是第二个 DIV</div><div class="box"style="height: 300px; background-color: lightblue; margin-top: 500px;">这是第三个 DIV</div><div class="box">这是第四个 DIV</div><div class="box">这是第一个 DIV</div><div class="box"style="height: 300px; background-color: lightblue; margin-top: 500px;">这是第5个 DIV</div><div class="box">这是第三个 DIV</div><div class="box"style="height: 300px; background-color: lightblue; margin-top: 500px;">这是第三88个 DIV</div><div class="box">这是第一个 DIV</div><div class="box">这是第二个 DIV</div><div class="box">这是第三个 DIV</div><div class="box">这是第四个 DIV</div><script>document.addEventListener("DOMContentLoaded", function() {const divs = document.querySelectorAll('div'); // 选择所有 div 元素// 创建一个 IntersectionObserverconst observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) { // 当元素进入视口时entry.target.classList.add('show'); // 给元素添加动画类observer.unobserve(entry.target); // 只执行一次，移除监听}});}, {threshold: 0.1 // 只有当元素至少 10% 进入视口时才触发});// 为每个 div 元素添加观察divs.forEach(div => observer.observe(div));
});</script></body>
</html>

  1. HTML：

    • 页面上有几个 .box 元素。它们默认是不可见的，只有当它们滚动到视口时，才会触发动画。

  2. CSS：

    • .box 元素初始状态为 opacity: 0（不可见）和 transform: translateY(50px)（位置偏移）。这意味着元素从下方滑动到页面上。
    • @keyframes fadeInUp 动画定义了元素从不可见状态到可见状态，并从下方滑动到其原位置。
    • .show 类会应用这个动画。

  3. JavaScript：

    • getBoundingClientRect() 用于获取元素相对于视口的位置。通过检查 boxTop 的值与 windowHeight（窗口高度）来确定元素是否已经进入视口。
    • if (boxTop < windowHeight - 100) 检查当前元素距离视口顶部的距离。如果元素离视口顶部足够近（100px以内），就触发动画。
    • 在滚动事件触发时，调用 checkScroll() 来检查每个元素是否进入视口。
    • checkScroll() 在页面加载时也会执行一次，确保当页面刷新时，如果某些元素已经在视口内，它们能立即显示动画。

  • 使用 IntersectionObserver：这是一个更现代和高效的方法，可以用来检测元素是否进入视口。它比滚动事件更高效，避免了反复计算和检查。

进一步优化：每一次载入后就继续载入动画，效果更加动感

结果：

  • 每当 div 元素滚动到视口时，它都会触发动画，从下方滑动并渐显，完成一次动画。
  • 如果用户滚动元素离开视口，动画会被移除，当元素再次进入视口时，动画会重新触发。

优点：

  • 多次触发：每次 div 元素进入视口时都会触发动画，无论之前是否已经显示过。
  • 流畅的体验：适合需要持续响应用户滚动的动画效果，尤其适用于长页面和多个动画元素。
    <script>document.addEventListener("DOMContentLoaded", function() {const divs = document.querySelectorAll('div'); // 选择所有 div 元素// 创建一个 IntersectionObserverconst observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) { // 当元素进入视口时entry.target.classList.add('show'); // 给元素添加动画类} else {entry.target.classList.remove('show'); // 离开视口时移除动画类}});}, {threshold: 0.1 // 只有当元素至少 10% 进入视口时才触发});// 为每个 div 元素添加观察divs.forEach(div => observer.observe(div));
});</script>

相关文章：

JS +CSS @keyframes fadeInUp 来定义载入动画

JSCSS 更完美展现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>跳动加载指示器</title>&l…...

编程日记 2024/12/4 15:45:57

Seatunnel解决ftp读取json文件无法读取数组以及格式化之后的json无法解析的问题

问题原因 在JsonRead这个方法里面 在源码中使用的逻辑是读取一行 然后把这个json进行解析 但是这样存在一个问题 比如如果json的格式是这样的 { name&#xff1a;“zhangsan”&#xff0c; age&#xff1a;25 } 如果是这样的话 第一行读到的内容就是 { 显然 一个 { 并不是一个…...

编程日记 2024/12/4 15:44:56

Elasticsearch在liunx 中单机部署

下载配置 1、下载 官网下载地址 2、上传解压 tar -zxvf elasticsearch-XXX.tar.gz 3、新建组和用户 &#xff08;elasticsearch 默认不允许root账户&#xff09; #创建组 es groupadd es #新建用户 useradd ryzhang -g es 4、更改文件夹的用户权限 chown -R ryzhang …...

编程日记 2024/12/4 15:43:53

深入探索 HarmonyOS 的 Navigation 组件：灵活的页面管理与动态导航

在移动应用开发中&#xff0c;页面的跳转和导航一直是核心功能之一。对于 HarmonyOS 开发者来说&#xff0c;Navigation 组件提供了一个强大的工具来实现灵活的页面管理和导航体验。今天&#xff0c;我们将深入探讨如何使用 HarmonyOS 中的 Navigation 组件来管理页面跳转、工具…...

编程日记 2024/12/4 15:39:50

【CUDA】CUDA Hierarchy

【CUDA】CUDA 基本概念和 Hierarchy CUDA 编程基础&#xff1a;Host 和 Device 工作流程 首先简单介绍CUDA 编程的基本概念&#xff1a;讲解 Host&#xff08;CPU&#xff09;与 Device&#xff08;GPU&#xff09;的区别、内存管理以及 CUDA 运行时的工作机制。 Host&#x…...

编程日记 2024/12/4 15:38:48

28.100ASK_T113-PRO Linux+QT 显示一张照片

1.添加资源文件 2. 主要代码 #include "mainwindow.h" #include "ui_mainwindow.h" #include <QImage> #include <QPixmap>MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow) {ui->setupUi(this);QIm…...

编程日记 2024/12/4 15:35:44

GitLab使用中遇到的一些问题-记录

错误内容一 Warning: Permanently added gitlab.com (ED25519) to the list of known hosts. gitgitlab.com: Permission denied (publickey). Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. …...

编程日记 2024/12/4 15:33:41

【微服务】Docker

一、Docker基础 1、依赖的兼容问题&#xff1a;Docker允许开发中将应用、依赖、函数库、配置一起打包&#xff0c;形成可移植镜像Docker应用运行在容器中&#xff0c;使用沙箱机制&#xff0c;相互隔离。 2、如何解决开发、测试、生产环境有差异的问题&#xff1a;Docker镜像…...

编程日记 2024/12/4 15:31:39

【C#】书籍信息的添加、修改、查询、删除

文章目录 一、简介二、程序功能2.1 Book类属性&#xff1a;方法&#xff1a; 2.2 Program 类 三、方法&#xff1a;四、用户界面流程&#xff1a;五、程序代码六、运行效果 一、简介 简单的C#控制台应用程序&#xff0c;用于管理书籍信息。这个程序将允许用户添加、编辑、查看…...

编程日记 2024/12/4 15:27:34

Python 入门教程（2）搭建环境 | 2.4、VSCode配置Node.js运行环境

文章目录 一、VSCode配置Node.js运行环境1、软件安装2、安装Node.js插件3、配置VSCode4、创建并运行Node.js文件5、调试Node.js代码 一、VSCode配置Node.js运行环境 1、软件安装 安装下面的软件&#xff1a; 安装Node.js&#xff1a;Node.js官网 下载Node.js安装包。建议选择L…...

编程日记 2024/12/4 15:26:33

Spark常问面试题---项目总结

一、数据清洗&#xff0c;你都清洗什么&#xff1f;或者说 ETL 你是怎么做的&#xff1f; 我在这个项目主要清洗的式日志数据&#xff0c;日志数据传过来的json格式 去除掉无用的字段&#xff0c;过滤掉json格式不正确的脏数据 过滤清洗掉日志中缺少关键字段的数据&#xff…...

编程日记 2024/12/4 15:25:32

【AI系统】Auto-Tuning 原理

Auto-Tuning 原理 在硬件平台驱动算子运行需要使用各种优化方式来提高性能&#xff0c;然而传统的手工编写算子库面临各种窘境&#xff0c;衍生出了自动生成高性能算子的的方式&#xff0c;称为自动调优。在本文我们首先分析传统算子库面临的挑战&#xff0c;之后介绍基于 TVM…...

编程日记 2024/12/4 15:22:27

AMEYA360：上海永铭电子全新高压牛角型铝电解电容IDC3系列，助力AI服务器电源高效运转

随着数据中心和云计算的高速发展&#xff0c;AI服务器的能效要求日益提高。如何在有限空间内实现更高的功率密度和稳定的电源管理&#xff0c;成为AI服务器电源设计的一大挑战。永铭推出全新高压牛角型铝电解电容IDC3系列&#xff0c;以大容量、小尺寸的创新特性&#xff0c;为…...

编程日记 2024/12/4 15:21:25

echarts地图立体效果,echarts地图点击事件,echarts地图自定义自定义tooltip

一.地图立体效果 方法1:两层地图叠加 实现原理:geo数组中放入两个地图对象,通过修改zlevel属性以及top,left,right,bottom形成视觉差 配置项参考如下代码: geo: [{zlevel: 2,top: 96,map: map,itemStyle: {color: #091A51ee,opacity: 1,borderWidth: 2,borderColor: #16BAFA…...

编程日记 2024/12/4 15:20:24

什么是 Socket？

Socket&#xff08;套接字&#xff09;是计算机网络编程中的一个重要概念&#xff0c;它用于在不同计算机之间进行通信。Socket 提供了一种机制&#xff0c;使得应用程序可以通过网络发送和接收数据。Socket 通信通常基于 TCP/IP 协议&#xff0c;但也可以使用其他协议&#xf…...

编程日记 2024/12/4 15:17:22

【版本控制】SVN安装到使用一条路讲解

文章目录 安装使用 Subversion (SVN) 是一款集中式版本控制系统&#xff0c;广泛应用于团队协作和代码管理中。尽管随着 Git 的兴起&#xff0c;集中式版本控制逐渐被分布式工具取代&#xff0c;但 SVN 仍在许多企业项目中发挥着重要作用。它的简单、稳定和易用特性&#xff0c…...

编程日记 2024/12/4 15:14:18

KVCKVO

KVC KVC意思是键值编码&#xff0c;是一种可以通过键名来访问对象属性的机制&#xff0c;也可以对属性进行赋值&#xff0c;包括私有属性&#xff0c;由于KVC的定义是对OC中的NSObject的扩展进行实现的&#xff0c;所以如果要使用KVC机制&#xff0c;那么这个类需要继承NSObje…...

编程日记 2024/12/4 15:13:15

PyQt设计界面优化 #qss #ui设计 #QMainWindow

思维导图 通过qss实现ui界面设计优化 Qss是Qt程序界面中用来设置控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性&#xff0c;它是用来美化UI界面。实现界面和程序的分离&#xff0c;快速切换界面。 首先我们在Pytchram创建一个新目录 然后将我们所需要的图片打…...

编程日记 2024/12/4 15:12:13

Qt Serial Bus 前置介绍篇

文章目录 Qt Serial Bus 简介前言 什么是 Qt Serial Bus&#xff1f;Qt Serial Bus 的核心功能支持的协议1. **CAN 总线**2. **Modbus**3. **自定义协议** 应用场景优势总结 Qt Serial Bus 简介 前言 Qt Serial Bus 是 Qt 框架中的一个模块&#xff0c;用于与工业设备和嵌入式…...

编程日记 2024/12/4 15:10:11

12.2深度学习_项目实战

十、项目实战 鲍勃开了自己的手机公司。他想与苹果、三星等大公司展开硬仗。 他不知道如何估算自己公司生产的手机的价格。在这个竞争激烈的手机市场&#xff0c;你不能简单地假设事情。为了解决这个问题&#xff0c;他收集了各个公司的手机销售数据。 鲍勃想找出手机的特性(例…...

编程日记 2024/12/4 15:07:03

AI医疗Agent如何72小时通过NMPA二类证审批：附2024最新审评问答清单与材料模板

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI医疗Agent的监管合规本质与NMPA二类证核心逻辑 AI医疗Agent并非通用大模型的简单应用延伸&#xff0c;而是以临床决策支持、病灶识别、报告生成等具体医疗器械功能为边界的技术实体。其监管合规本质在…...

编程新知 2026/5/24 0:01:51

CANN-ATB量化推理-昇腾NPU上W8A8量化为什么比W4A16更实用

Llama2-70B 权重 140GB&#xff0c;8 卡 TP 刚好放得下但没什么余量给 KV Cache。W8A8 量化把权重从 fp16 压到 int8&#xff0c;权重体积减半&#xff0c;4 卡就能跑 70B。W4A16 理论上压得更狠&#xff08;4 倍压缩&#xff09;&#xff0c;但精度损失在实际业务里往往不可接…...

编程新知 2026/5/23 23:49:11

瑞数6代JSVMP逆向实战：Node.js复现可信字节码运行时

1. 这不是“绕过验证码”&#xff0c;而是和瑞数6代打一场精密的JavaScript攻防战你肯定见过那个页面&#xff1a;刚点开目标网站&#xff0c;还没输入账号&#xff0c;浏览器就卡住半秒&#xff0c;接着弹出一个412 Precondition Failed——不是403&#xff0c;不是500&#x…...

编程新知 2026/5/23 23:04:05

Unity Play Mode状态保存原理与实战配置指南

1. 为什么“Play Mode Save”不是个噱头&#xff0c;而是Unity开发者每天都在默默忍受的痛点你有没有过这样的经历&#xff1a;在Unity编辑器里调试一个带状态的敌人AI&#xff0c;刚给它加了血量、仇恨目标、技能冷却计时器&#xff0c;正准备按Play键验证行为逻辑——结果一按…...

编程新知 2026/5/23 23:02:05

解决Claude Code密钥被封与Token不足的替代接入方案

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 解决Claude Code密钥被封与Token不足的替代接入方案 对于频繁使用Claude Code编程助手的开发者而言&#xff0c;开发流程中突然遇到…...

编程新知 2026/5/23 22:43:48

Rust 环境搭建指南

Rust 环境搭建指南 引言 Rust 是一种系统编程语言，以其高性能、内存安全和并发特性而闻名。在本文中，我们将详细讲解如何搭建 Rust 开发环境，包括安装 Rust 语言、配置编辑器以及使用 Rust 包管理器 Cargo。 安装 Rust 系统要求 在开始之前，请确保您的计算机满足以下系…...

编程新知 2026/5/23 22:31:15

内网离线部署RPA：打包EXE+本地激活+数据零上云方案

领导给了一周&#xff0c;我前三天全耗在这个报错上&#xff1a;无法连接到 activation.xxx.com 请检查网络连接后重试2024年5月&#xff0c;我用的蓝印RPA物理隔离内网部&#xff0c;处理核心业务数据&#xff0c;要求"数据不出本机&#xff0c;流程不外传&#xff0c;审…...

编程新知 2026/5/23 21:06:19

CANN-昇腾NPU长序列训练-128K上下文怎么不OOM

Llama 3 支持 128K 上下文长度。训练时 128K 序列的 Attention 显存是 O(N)&#xff1a;128K 128K fp16 32GB 每层&#xff0c;32 层 1TB。显然放不下。FlashAttention 把显存从 O(N) 降到 O(N)&#xff0c;但在训练场景下还有额外挑战。 FlashAttention 的显存节省 标准 At…...

编程新知 2026/5/23 20:58:10

戴森球计划终极蓝图指南：从新手到专家的完整工厂建设方案

戴森球计划终极蓝图指南&#xff1a;从新手到专家的完整工厂建设方案 【免费下载链接】FactoryBluePrints 游戏戴森球计划的**工厂**蓝图仓库 项目地址: https://gitcode.com/GitHub_Trending/fa/FactoryBluePrints FactoryBluePrints是戴森球计划玩家必备的工厂蓝图仓库…...

编程新知 2026/5/23 20:18:00

【限时公开】Anthropic内部文档评审Checklist泄露版：92%开发者忽略的8个Claude API语义一致性陷阱

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Claude API文档编写的核心原则与语义一致性定义 编写高质量的Claude API文档&#xff0c;首要任务是坚守三大核心原则&#xff1a;可预测性、可验证性与可演进性。可预测性要求所有接口行为严格遵循OpenAPI 3…...

编程新知 2026/5/23 19:54:23