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

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

news 2026/2/7 23:41:04

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

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2026/2/5 5:03:16

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2026/2/7 17:31:44

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2026/2/3 15:24:36

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/12/27 16:43:24

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/10/14 6:46:13

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2026/1/29 9:14:58

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2026/1/25 7:20:01

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/11/24 9:42:16