仅 CSS 阅读进度条

为了构建一个阅读进度条,即显示用户向下滚动时阅读文章的进度,很难不考虑 JavaScript。但是,事实证明,您也可以使用纯 CSS 构建阅读进度条。

从本质上讲,一个名为 animation-timeline 的新实验性 CSS 属性可以让你指定用于控制 CSS 动画进度的时间轴。我们将用它来创建阅读进度条。

首先,我们需要定义一个用作进度条的 div 元素。我们将使用一个固定在视口顶部的容器来包装这个 div 。这将确保用户向下滚动页面时进度条始终可见。

<div class="progress-bar-container">
    <div class="progress-bar"></div>
</div>
<div class="content">
    <!-- content goes here -->
</div>

接下来,我们将定义进度条的样式。我们将设置 progress-bar-container 固定在视口顶部并调整其背景颜色,该颜色始终对用户可见。我们还将 progress-bar 设置为 100% 宽度。

.progress-bar-container {
    position: fixed;
    top: 0px;
    width: 100%;
    background: #6c2fa2;
    z-index: 999;
}

现在,为了使进度条动画化,我们将为 progress-bar 使用不同的背景颜色,并将其高度设置为 7px 。我们还将 animation-name 设置为 width ,这实际上将进度条的宽度从 0 动画到 100%

最后,我们将 animation-timeline 设置为 scroll(y) ,将动画时间轴绑定到视口的垂直滚动位置。这将确保当用户向下滚动页面时进度条具有动画效果。

.progress-bar {
    height: 7px;
    background: #e131ff;
    animation-name: width;

    /* animation timeline is tied to vertical scroll position */
    animation-timeline: scroll(y);
}

@keyframes width {
    from { width: 0 }
    to   { width: 100% }
}

就是这样!您可以在下面看到它的实际效果。

2023-11-27 21-40-09.2023-11-27 21_40_53.gif

由于 animation-timeline 属性仍处于实验阶段,因此并非所有浏览器(准确地说是 FirefoxSafari)都支持它。

您可以检查浏览器的兼容性并据此使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/218148.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【工具使用-Audition】如何使用Audition频谱分析

一&#xff0c;简介 本文以Audition 2020为例&#xff0c;介绍如何生成频谱分析的图像。 二&#xff0c;操作步骤 使用快捷键“shift D” 三&#xff0c;总结 本文主要介绍如何查看频谱分析&#xff0c;供参考。

dll动态链接库【C#】

1说明: 在C#中,dll是添加 【类库】生成的。 2添加C#的dll: (1)在VS中新建一个Windows应用程序项目,并命名为TransferDll。 (2)打开Windows窗体设计器,从工具箱中为窗体添加相应的控件。 (3)在该应用程序的“解决方案资源管理”中的“引用”文件上单击鼠标右键, 在…

沐风老师3DMAX拼图随机生成器Puzzle建模工具使用教程

3DMAX拼图随机生成器Puzzle建模工具使用教程 3DMAX拼图随机生成器Puzzle&#xff0c;是一款用MAXScript脚本语言开发的3dsMax小工具&#xff0c;可以随机创建可编辑多边形3D拼图对象。可批量生成阵列。 【适用版本】 3dMax2015-2024&#xff08;不仅限于此范围&#xff09; 【…

【Unity动画】Unity 动画播放的流程

本文以2D为案例&#xff0c;讲解Unity 播放动画的流程 准备和导入2D动画资源 外部导入序列帧生成的 Unity内部制作的 外部导入的3D动画 2.创建动画过程 打开时间轴Ctrl6 选中场景中的一个未来需要播放动画的物体 回到时间轴点击Create一个新动画片段 拖动2D动画资源放入…

探索图像生成中的生成对抗网络 (GAN) 世界

一、介绍 生成对抗网络&#xff08;GAN&#xff09;的出现标志着人工智能领域的一个重要里程碑&#xff0c;特别是在图像生成领域。GAN 由 Ian Goodfellow 和他的同事于 2014 年提出&#xff0c;代表了机器学习中的一种新颖方法&#xff0c;展示了生成高度逼真和多样化图像的能…

专业做除甲醛净化器的品牌 甲醛净化器什么牌子最好用

室内产生了超标的甲醛&#xff0c;大部分都会采取选择甲醛空气净化器来去除&#xff0c;甲醛净化器逐渐成为室内清除甲醛的主力&#xff0c;在选择甲醛净化器时&#xff0c;人们常常会被市场上琳琅满目的空气净化器品牌所迷惑&#xff0c;各品牌和型号都声称自己最好&#xff0…

❀dialog命令运用于linux❀

目录 ❀dialog命令运用于linux❀ msgbox部件&#xff08;消息框&#xff09; yesno部件&#xff08;yesno框&#xff09; inputbox部件&#xff08;输入文本框&#xff09; textbox部件&#xff08;文本框&#xff09; menu部件&#xff08;菜单框&#xff09; fselect部…

Python---面向对象的基本概念

对象 对象&#xff0c;object&#xff0c;现实业务逻辑的一个动作实体就对应着OOP编程中的一个对象&#xff01; 所以&#xff1a;① 对象使用属性&#xff08;property&#xff09;保存数据&#xff01;② 对象使用方法&#xff08;method&#xff09;管理数据&#xff01; …

PyQt实战 创建一个PyQt5项目

前后端分离 参考链接 PyQt5实战&#xff08;二&#xff09;&#xff1a;创建一个PyQt5项目_pyqt5实战项目_笨鸟未必先飞的博客-CSDN博客 项目目录 创建一个QT项目 调用pyuic工具将dialog.ui文件编译为Python程序文件ui_dialog.py。 # -*- coding: utf-8 -*-# Form implemen…

element-ui upload组件中将file文件数据转成二进制流数据格式

方法一 handleBeforeUpload (file)const reader new FileReader()reader.readAsArrayBuffer(file)reader.onload async function (theFile) {const binary new Blob([theFile.target.result]) // 转成二进制流数据 即binary数据格式}}方法二 const aBlob new Blob([file],…

【C语言】深入理解指针(1)

目录 前言 &#xff08;一&#xff09;内存与地址 从实际生活出发 地址 内存 内存与地址关系密切 &#xff08;二&#xff09;指针变量 指针变量与取地址操作符 指针变量与解引用操作符 指针的大小 指针的运算 指针 - 整数 指针-指针 指针的关系运算 指针的类型的…

2022 China Collegiate Programming Contest (CCPC) Guilin Site

A.Lily Problem - A - Codeforces 题意 思路 数所有周围没L的格子 #include <bits/stdc.h>using i64 long long;constexpr int N 2e5 10; constexpr int mod 1e9 7; constexpr int Inf 0x3f3f3f3f; constexpr double eps 1e-10;std::string s;int n;void solv…

vue3 + TS 项目中使用pinia-plugin-persistedstate持久化缓存

Vue 3和Pinia是一对非常好的组合&#xff0c;可以帮助你构建现代化的Vue应用程序。而pinia-plugin-persistedstate是一个用于在Pinia存储中实现状态持久化的插件。下面我将详细介绍如何在Vue 3应用程序中使用Pinia和pinia-plugin-persistedstate模块。 首先&#xff0c;确保你…

Redis高可用之Sentinel哨兵模式

一、背景与简介 Redis关于高可用与分布式有三个与之相关的运维部署模式。分别是主从复制master-slave模式、哨兵Sentinel模式以及集群Cluster模式。 这三者都有各自的优缺点以及所应对的场景、对应的业务使用量与公司体量。 1、主从master-slave模式 【介绍】 这种模式可以采用…

Vue学习计划--Vue2(二)Vue代理方式

Vue data中的两种方式 对象式 data:{}函数式 data(){return {} }示例&#xff1a; <body><div id"app">{{ name }} {{ age}} {{$options}}<input type"text" v-model"value"></div><script>let vm new Vue({el: …

【C++】STL简介(了解)【STL的概念,STL的历史缘由,STL六大组件、STL的重要性、以及如何学习STL、STL的缺陷的讲解】

这里写自定义目录标题 一、什么是STL二、STL的版本1. 原始版本2. P. J. 版本3. RW版本★ 4. SGI版本 三、STL的六大组件四、STL的重要性五、如何学习STL六、STL的缺陷 一、什么是STL STL ( standard template libaray - 标准模板库 )&#xff1a;是C标准库 的重要组成部分&…

nodejs+vue+微信小程序+python+PHP就业求职招聘信息平台的设计与实现-计算机毕业设计推荐

主要有前端和后端&#xff0c;前端显示整个网站的信息&#xff0c;后端主要对前端和网站的基本信息进行管理。用户端模块主要是系统中普通用户在注册、登录系统可以看到自己的基本信息&#xff0c;维护自己的信息&#xff1b;管理员端模块主要是管理员登录后对整个系统相关操作…

【算法】算法题-20231205

这里写目录标题 一、LCS 01. 下载插件二、已知一个由数字组成的列表&#xff0c;请将列表中的所有0移到右侧三、实现一个trim()函数&#xff0c;去除字符串首尾的空格&#xff08;不能使用strip()方法&#xff09; 一、LCS 01. 下载插件 简单 小扣打算给自己的 VS code 安装使…

自动化巡检实现方法 (一)------- 思路概述

一、自动化巡检需要会的技能 1、因为巡检要求一天24小时全天在线&#xff0c;因此巡检程序程序一定会放在服务器上跑&#xff0c;所以要对linux操作熟悉哦 2、巡检的代码要在git上管理&#xff0c;所以git的基本操作要熟悉 3、为了更方便不会代码的同学操作&#xff0c;所以整个…

LaTex入门简明教程

文章目录 写在前面安装Texlive的安装TeXstudio 的安装 LaTex 的使用节指令图指令表指令公式指令参考文献指令引用指令TeXstudio 编译 LaTex 的 \label{} 写法建议最后 写在前面 这篇文章面向没有任何 LaTex 基础的小白&#xff0c;主要讲解了 LaTex 的安装和使用。读完文章之后…
最新文章