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

CSS 滚动驱动动画 scroll()

news 2025/11/6 20:44:51

CSS 滚动驱动动画 scroll()

animation-timeline 通过 scroll() 指定可滚动元素与滚动轴来为容器动画提供一个匿名的 scroll progress timeline.

通过元素在顶部和底部(或左边和右边)的滚动推进 scroll progress timeline. 并且元素滚动的位置会被转换为百分比, 滚动开始被转化为 0%, 滚动结束被转化为 100%

如果 scroll() 指定的滚动轴不包含滚动条, 也就是元素在滚动轴的方向不可滚动, 那么 timeline 的进度为 0%.

语法

scroll() 可以接受两个参数

  • 滚动元素: 滚动元素提供 scroll progress timeline. 可以取值
    • nearest: (默认值)设置 animation-timeline 元素最近的、具有滚动条的祖先元素.
    • root: 文档的根元素, 即 <html> 元素
    • self: 设置 animation-timeline 的元素自身
  • 滚动轴:
    • y: 垂直滚动轴
    • x: 水平滚动轴
    • block: (默认值)与滚动容器中行内文本方向垂直的轴. 对于从左到右书写的文字, 与 y 相同. 对于从上到下书写的文字, 与 x 相同.
    • inline: 与滚动容器中行内文本方向水平的轴. 对于从左到右书写的文字, 与 x 相同. 对于从上到下书写的文字, 与 y 相同.

这两个参数的书写顺序没有要求, 但是参数之间没有逗号, 这一点我一定要强调, 因为 translate 这个函数的参数就需要有逗号!!!

实例

正常举例

下面以背景渐变举例, 并且滚动容器就是元素自身.

@keyframes bg-color {from {background-color: lightpink;}to {background-color: lightskyblue;}
}
.box {width: 200px;height: 300px;border: 1px solid #bbb;overflow: auto;animation: bg-color linear;animation-timeline: scroll(self);
}

在这里插入图片描述

如果我们加上下面的代码, 改变文字书写方向, 从上到下, 从左到右

html { writing-mode: vertical-lr; }

在这里插入图片描述

最近滚动祖先?

来看一个例子, 这个例子出现了问题, 为什么动画没有效果呢? 📖注意这里我们使用了两个非 static 定位的元素.

<div class="relative"><div class="scroll"><div class="absolute"></div></div>
</div>

.relative {position: relative;
}
.absolute {position: absolute;animation: bg-color linear;animation-timeline: scroll();
}
.scroll {height: 200px;overflow: auto;
}

在这里插入图片描述

为什么元素在滚动时背景没有变化呢? scroll() 不是寻找最近滚动祖先元素吗? 是的, 但是在寻找最近祖先元素时这个祖先元素必须可以影响其位置和大小. 因为元素是 absolute, 那么可以影响其位置和大小的祖先元素显然不是 .scroll 而是 .relative.

🤔️有没有方法可以就让提供 scroll progress timeline 的元素是 .scroll 呢? 有, 请各位客官看这里👉scroll-timeline👈

谢谢你看到这里😊

相关文章：

CSS 滚动驱动动画 scroll()

CSS 滚动驱动动画 scroll() animation-timeline 通过 scroll() 指定可滚动元素与滚动轴来为容器动画提供一个匿名的 scroll progress timeline. 通过元素在顶部和底部(或左边和右边)的滚动推进 scroll progress timeline. 并且元素滚动的位置会被转换为百分比, 滚动开始被转化为…...

编程日记 2023/9/9 0:00:03

基于Java+SpringBoot+Vue前后端分离在线考试系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…...

编程日记 2023/9/8 23:59:02

nvm管理多个版本的nodejs

1. 已经安装过nodejs在安装nvm的步骤 1.安装nvmhttps://github.com/coreybutler/nvm-windows/releases 2.nvm安装位置 2.nvm管理的nodejs安装位置 4.最终的安装结构 备注&#xff1a;nodejs安装 2.使用nvm安装管理nodejs 2.1配置下载镜像&#xff1a; 找到nvm安装路径…...

编程日记 2023/9/8 23:58:01

LeetCode 1658. 将 x 减到 0 的最小操作数

题目链接 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目解析 有种说法叫做&#xff0c;正难则反。我们直接去按照题目意思去求很难去理解与操作&#xff0c;但是我们换种思想就会简单许多。我们让整个数组的和减去x得到一个target&#xff0c…...

编程日记 2023/9/8 23:56:59

Rasa 3.1 机器学习一构建标准的对话

1、控制请求(domain.yml) version: "3.1"intents:- hellosession_config:session_expiration_time: 60carry_over_slots_to_new_session: true2、规则制定(rules.yml) version: "3.1" rules:- rule: havebsteps:- intent: hello- action: utter_hello3、…...

编程日记 2023/9/8 23:55:58

MySQL的概述、版本、安装过程

作者&#xff1a;Insist-- 个人主页&#xff1a;insist--个人主页 作者会持续更新网络知识和python基础知识&#xff0c;期待你的关注 目录 一、MySQL的概述 二、MySQL的版本 三、MySQL的下载与安装 前言 本文将来谈谈MySQL的概述&#xff0c;MySQL的版本&#xff0c;以及它…...

编程日记 2023/9/8 23:54:57

leetcode：58. 最后一个单词的长度

题目&#xff1a; 函数原型&#xff1a; int lengthOfLastWord(char * s) 解析&#xff1a; 求最后一个单词的长度&#xff0c;我们有两种思路 第一种思路&#xff1a; 逆向求&#xff0c;先设置一个字符串下标index&#xff0c;定位到最后一个单词的最后一个字符。再一个设置长…...

编程日记 2023/9/8 23:53:56

Electron 两个线程

Electron&#xff1a;它允许使用最初为Web应用程序开发的前端和后端组件开发桌面GUI应用程序&#xff1a;后端的Node.js运行时和前端的Chromium。 每个Electron应用都有两个线程&#xff1a;一个是主线程&#xff08;处理应用窗口和启动&#xff09;&#xff0c;另一个是渲染线…...

编程日记 2023/9/8 23:52:55

基于YOLOv8和WiderFace数据集的人脸目标检测系统（PyTorch+Pyside6+YOLOv8模型）

摘要&#xff1a;基于YOLOv8和WiderFace数据集的人脸目标检测系统可用于日常生活中检测与定位人脸目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算…...

编程日记 2023/9/8 23:51:54

《消息队列》专栏介绍

《消息队列》专栏介绍 目录 《消息队列》专栏介绍专栏导言什么是消息队列呢&#xff1f;应用场景&#xff08;作用&#xff09; 为什么要用消息队列呢&#xff1f;异步处理削峰填谷 举个例子 分布式消息队列的优势 应用解耦优点发布订阅优点 分布式消息队列应用场景不同消息队列…...

编程日记 2023/9/8 23:50:52

各类工具使用详情【持续更新】

详解nc命令 https://blog.csdn.net/qq_42875470/article/details/114778326 xray工具使用 sqlmap工具使用 burp工具使用 nmap工具使用 appscan工具使用 fscan工具使用...

编程日记 2023/9/8 23:49:52

docker容器的安装和基础练习

目录 一.安装docker服务&#xff0c;配置镜像加速器 二.下载系统镜像&#xff08;Ubuntu、 centos&#xff09; 三.基于下载的镜像创建两个容器 &#xff08;容器名一个为自己名字全拼&#xff0c;一个为首名字字母&#xff09; 四.容器的启动、 停止及重启操作 五.怎么查…...

编程日记 2023/9/8 23:48:50

WordPress 后台密码忘记后，重置找回密码的 N 种方法

文章目录 一、通过其他管理员修改密码二、通过电子邮件找回密码三、通过 MySQL 命令行设置新密码四、主题文件functions.php添加代码重置密码五、使用官方脚本重置密码 忘记密码是每个人都会遇到的事情&#xff0c;长时间不登录 WordPress 站点后&#xff0c;作为管理员的你&am…...

编程日记 2023/9/8 23:47:49

将PyCharm中的终端运行前面的PS修改成当前环境

最近使用Pycharm中的Terminal来pip安装一些pakage&#xff0c;发现Terminal运行前面的显示的是PS&#xff0c;然后输入安装指令报错。“python无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。” 解决方法&#xff1a; 只需要在pycharm的设置中修改一些termi…...

编程日记 2023/9/8 23:46:46

Linux系统编程—socket网络编程

Linux系统编程—socket网络编程 理论概念1. TCP与UDP对比端口号作用 socket开发过程服务端1. socket 创建套接字2. bind 绑定IP端口3. listen 监听客户端4. accept 接收客户端5. read / write 数据传输 客户端1. socket 创建套接字2. connect 连接服务3. read / write 数据传输…...

编程日记 2023/9/8 23:45:45

函数指针

函数指针是一种特殊类型的指针&#xff0c;它指向一个函数而不是指向数据。函数指针允许你在程序运行时动态地选择要调用的函数&#xff0c;这对于实现回调函数、事件处理、动态加载库和创建通用函数接口等任务非常有用。 1. 声明函数指针 要声明一个函数指针&#xff0c;你需…...

编程日记 2023/9/8 23:44:44

Linux——进程间信号(超级详解！！)

索引 一.初始信号1.什么是信号2.前后台进程3.信号的种类4.信号的管理 二.信号产生前1.验证键盘是可以产生信号的2.通过系统调用接口发送信号3.由软件条件产生信号4.硬件异常产生信号5.总结6.core dump 信号产生中1.信号在内核中的表示2.信号集操作函数 信号产生后1.了解内核态和…...

编程日记 2023/9/8 23:43:43

C++ STL库的介绍和使用

文章目录 C STL库的介绍和使用STL六大组件算法的分类迭代器 一个简单的例子容器和自定义类型容器嵌套容器常用容器stringvectordequestackqueuelistset/multisetpairmap/multimap 容器的使用时机函数对象&#xff08;仿函数&#xff09;谓词内建函数对象适配器bind2nd和bind1st…...

编程日记 2023/9/8 23:42:42

Excel数学、工程和科学计算插件：FORMULADESK Studio

如果 Excel 是您的武器 - 让我们磨砺您的剑&#xff01;为整天使用 Excel 的人们提供创新的 Excel 加载项&#xff0c;你需要这个 FORMULADESK Studio。。。 Excel 插件为任何使用 Excel 执行数学、工程和科学计算的人提供了必备工具。 * 将公式视为真正的数学方程 * 为您的公…...

编程日记 2023/9/8 23:41:41

大规模 Spring Cloud 微服务无损上下线探索与实践

文章目录 什么是无损上下线&#xff1f;大规模 Spring Cloud 微服务架构实现无损上下线的挑战无损上下线的实践1. 使用负载均衡器2. 使用数据库迁移工具3. 动态配置管理4. 错误处理和回滚 未来的趋势1. 容器编排2. 服务网格3. 自动化测试和验证 结论 &#x1f389;欢迎来到云原…...

编程日记 2023/9/8 23:40:39

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/9/22 15:46:39

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/11/5 4:23:19

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/9/23 9:00:33

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/11/5 17:12:12

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/10/30 4:02:31

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2025/10/27 11:51:48