坐不住喜单溜 发表于 2023-10-6 20:23:38

Css实现浏览滚动条效果

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属性的兼容性


来源:https://www.cnblogs.com/ZYPLJ/archive/2023/10/06/17745006.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: Css实现浏览滚动条效果