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

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

news 2026/2/9 0:22:51

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

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2026/1/31 6:53:51

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

企业如何增强终端安全？

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

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

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/12/4 8:54:35

【51单片机】4. 模块化编程与LCD1602Debug

1. 什么是模块化编程 传统编程会将所有函数放在main.c中&#xff0c;如果使用的模块多&#xff0c;一个文件内会有很多代码&#xff0c;不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里&#xff0c;在.h文件里提供外部可调用函数声明&#xff0c;其他.c文…...

编程新知 2026/1/22 11:13:58

表单设计器拖拽对象时添加属性

背景&#xff1a;因为项目需要。自写设计器。遇到的坑在此记录 使用的拖拽组件时vuedraggable。下面放上局部示例截图。 坑1。draggable标签在拖拽时可以获取到被拖拽的对象属性定义 要使用 :clone, 而不是clone。我想应该是因为draggable标签比较特。另外在使用**:clone时要将…...

编程新知 2026/2/6 5:47:40

Python异步编程：深入理解协程的原理与实践指南

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 持续学习&#xff0c;不断…...

编程新知 2026/2/5 2:28:10

VSCode 没有添加Windows右键菜单

关键字&#xff1a;VSCode&#xff1b;Windows右键菜单&#xff1b;注册表。 文章目录 前言一、工程环境二、配置流程1.右键文件打开2.右键文件夹打开3.右键空白处打开文件夹 三、测试总结 前言 安装 VSCode 时没有注意&#xff0c;实际使用的时候发现 VSCode 在 Windows 菜单栏…...

编程新知 2026/2/8 22:07:37