论坛
潜水/灌水快乐,沉淀知识,认识更多同行。
ToB圈子
加入IT圈,遇到更多同好之人。
朋友圈
看朋友圈动态,了解ToB世界。
ToB门户
了解全球最新的ToB事件
博客
Blog
排行榜
Ranklist
文库
业界最专业的IT文库,上传资料也可以赚钱
下载
分享
Share
导读
Guide
相册
Album
记录
Doing
搜索
本版
文章
帖子
ToB圈子
用户
免费入驻
产品入驻
解决方案入驻
公司入驻
案例入驻
登录
·
注册
只需一步,快速开始
账号登录
立即注册
找回密码
用户名
Email
自动登录
找回密码
密码
登录
立即注册
首页
找靠谱产品
找解决方案
找靠谱公司
找案例
找对的人
专家智库
悬赏任务
圈子
SAAS
ToB企服应用市场:ToB评测及商务社交产业平台
»
论坛
›
软件与程序人生
›
后端开发
›
.Net
›
Css实现浏览滚动条效果
Css实现浏览滚动条效果
王柳
金牌会员
|
2023-10-15 11:45:04
|
显示全部楼层
|
阅读模式
楼主
主题
539
|
帖子
539
|
积分
1617
Css实现浏览滚动条效果
前言
也是有大半个月没有更新文章了,大部分时间都在玩,然后就是入职的事。今天就更新一个小知识,刷抖音的时候看到的,感觉还不错。
属性介绍
关键属性animation-timeline:动画名称;
用于控制动画的时间轴。它可以让你在一个元素上同时播放多个动画,控制它们的开始时间和持续时间,并通过时间轴来管理它们。
代码实现
html
复制代码
css
.line{ position: fixed; top: 0; left: 0; z-index: 9999; width:0%; height:5px; background-color:darkorange; animation:scroll 3s linear; /* 动画的时间线 */ animation-timeline:scroll();}@keyframes scroll { from{
width:0%; } to{
width:100%; }}
复制代码
效果展示
注意网页头部,有个滚动条会根据当前浏览的网站高度去滚动。
结尾
但是css属性需要考虑到浏览器版本的兼容,推荐一个网站
https://caniuse.com/
可以查询css属性的兼容性
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
本帖子中包含更多资源
您需要
登录
才可以下载或查看,没有账号?
立即注册
x
回复
使用道具
举报
0 个回复
倒序浏览
返回列表
快速回复
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
or
立即注册
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
发新帖
回复
王柳
金牌会员
这个人很懒什么都没写!
楼主热帖
NSIS官方认证插件集成安装包 ...
[网鼎杯 2020 朱雀组]Think Java——wp ...
腾讯开源的 3 个 GitHub 项目,足够良 ...
Gorm 实现无限树形菜单
微信为什么使用 SQLite 保存聊天记录? ...
读Java实战(第二版)笔记18_基于Lambd ...
项目中多级缓存设计实践总结 ...
FPGA:乒乓球比赛模拟机的设计 ...
三天吃透Java基础八股文
Word书签替换,加盖电子印章及转换PDF ...
标签云
挺好的
服务器
快速回复
返回顶部
返回列表