【学习笔记】实现顶部滚动条

最新推荐文章于 2024-09-25 14:56:50 发布

My-Lady

最新推荐文章于 2024-09-25 14:56:50 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： jQuery 顶部动画进度条 animation

本文链接：https://blog.csdn.net/heshan1992/article/details/77931749

版权

本文介绍了如何使用CSS3的animation属性和jQuery的animation函数来创建顶部滚动条。CSS实现较难达到平滑过渡效果，而jQuery在滚动条达到100%时能通过transition自然隐藏。详细讲解了jQuery动画的多种参数配置，包括duration、step、progress和complete等，并指出要实现渐进特效需利用动画队列。

摘要由CSDN通过智能技术生成

静态实现顶部滚动条主要使用以下的两种方式：
（1）利用CSS3 的animation属性实现
（2）利用jQuery的animation动画实现
以下附上代码：
CSS实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顶部进度条</title>
    <style type="text/css">
        body{
            margin:0;
            width:100%
        }
        #progress {
            position:fixed;
            height: 2px;
            background:#2085c5;
            transition: width 1000ms ;
            animation: progress 2s ease-in 0.2s;
        }

        @-webkit-keyframes progress {
            0%{
                width: 0;
            }
            10%{
                width:10%;
            }
            20%{
                width:20%;
            }
            30%{
                width: