使用纯css画出一个右侧滚动顶部进度条的效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Right-Scrolling Progress Bar</title>
    <style>
        body {
            margin: 0; /* Remove default body margin */
        }

        .progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px; /* Adjust height as needed */
            background-color: #e0e0e0; /* Light gray background */
            overflow: hidden; /* Hide overflowing progress bar */
        }

        .progress-bar {
            height: 100%;
            background-color: #4CAF50; /* Green progress bar */
            width: 0%; /* Initial width is 0 */
            animation: progress-animation 5s linear forwards; /* Animate the width */
        }


        @keyframes progress-animation {
            0% {
                width: 0%;
                transform: translateX(-100%); /* Start off-screen to the left */
            }
            100% {
                width: 100%;
                transform: translateX(0%); /* End at the right edge */

            }
        }


    </style>
</head>
<body>

    <div class="progress-container">
        <div class="progress-bar"></div>
    </div>

    <!-- Add some content to demonstrate scrolling -->
    <div style="height: 2000px;">
        <!-- Your content here -->
    </div>

</body>
</html>

Explanation:

  1. progress-container:

    • position: fixed; top: 0; left: 0;: Positions the container at the top-left corner of the viewport, making it fixed during scrolling.
    • width: 100%;: Makes the container span the entire width of the viewport.
    • height: 5px;: Sets the height of the progress bar. Adjust as needed.
    • background-color: #e0e0e0;: Sets a light gray background for the container.
    • overflow: hidden;: Crucially, this hides any part of the progress-bar that extends beyond the container's width. This creates the scrolling effect.

  2. progress-bar:

    • height: 100%;: Makes the progress bar fill the container's height.
    • background-color: #4CAF50;: Sets the color of the progress bar (green in this example).
    • width: 0%;: Initial width is set to 0. The animation will change this.
    • animation: progress-animation 5s linear forwards;: Applies the progress-animation animation. 5s is the duration, linear makes the animation speed constant, and forwards keeps the final state of the animation.

  3. @keyframes progress-animation:

    • 0% { width: 0%; transform: translateX(-100%); }: At the start, the width is 0, and the bar is positioned entirely off-screen to the left using translateX(-100%).
    • 100% { width: 100%; transform: translateX(0%); }: At the end, the width is 100%, and the translateX is reset to 0, bringing the bar to its final position at the right edge. The animation makes it appear as though it's scrolling in from the left.

  4. Content Div: The <div style="height: 2000px;"> is just placeholder content to make the page scrollable so you can see the fixed progress bar in action. Replace this with your actual content.

Key Improvement: The use of transform: translateX() along with overflow: hidden creates a much smoother and more visually appealing scrolling effect compared to just animating the width alone. This avoids some of the jerky or "jumping" behavior that can occur with width-only animations. This revised code provides a more polished and professional solution.

posted @ 2024-12-05 09:22  王铁柱6  阅读(21)  评论(0)    收藏  举报