[分享]css倒计时进度条

发布于 2024-11-11 15:56:24

CSS倒计时进度条是一种常用的页面设计元素，它可以在页面中显示出倒计时进度，并提醒用户即将到达的时间。在本文中，我们将通过示例代码来讲解如何使用CSS倒计时进度条。 progress { width:...

CSS倒计时进度条是一种常用的页面设计元素，它可以在页面中显示出倒计时进度，并提醒用户即将到达的时间。在本文中，我们将通过示例代码来讲解如何使用CSS倒计时进度条。

<html>
  <head>
    <style>
      #progress {
        width: 100%;
        margin: 10px auto;
        height: 30px;
        background-color: #ededed;
        border-radius: 15px;
      }
      #progress span {
        display: block;
        height: 100%;
        border-radius: 15px;
        background-color: #2ecc71;
        position: relative;
        overflow: hidden;
        z-index: 1;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
      }
      #progress span:before {
        content: ';
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        background-color: #eeeeee;
        animation: progress 20s linear;
      }
      @keyframes progress {
        from { width: 0%; }
        to { width: 100%; }
      }
    </style>
  </head>
  <body>
    <div id="progress">
      <span></span>
    </div>
  </body>
</html>

上面的代码中，我们首先定义了一个进度条的容器，它有一个灰色的背景和圆角边框。然后，我们定义了一个进度条的内部元素，它的背景颜色为绿色，显示出进度的百分比。

接下来，我们使用伪元素:before来实现进度的动态效果。通过CSS动画的方式，我们将进度条从0%到100%的过程设置为20秒，这样每秒就会自动更新页面上的进度条。

通过以上的代码，我们就可以实现一个简单的CSS倒计时进度条，用来显示倒计时的剩余时间。如果需要更改进度条的颜色、宽度和进度条的速度，只需要对CSS代码进行少量的修改即可。

css 教程

一个月内的热帖推荐

91云脑

Lv.1普通用户

62849 帖子	14 小组	291 积分

62849

帖子

小组

291

积分

关注作者

发帖	回复	分享

赞助商广告

本组热帖