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

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

news 2025/7/12 14:47:34

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

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2025/7/9 23:12:19

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/7/6 14:15:06

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/7/9 22:23:37

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/7/10 20:24:30

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/7/6 20:47:25

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/6/17 0:45:39

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/7/8 16:00:54

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/7/11 5:34:58

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/6/19 4:31:50

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2025/7/11 16:12:18