css實(shí)現(xiàn)倒計(jì)時(shí)效果

一、實(shí)現(xiàn)效果截圖

成都創(chuàng)新互聯(lián)專注于中牟網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠(chéng)為您提供中牟營(yíng)銷型網(wǎng)站建設(shè)，中牟網(wǎng)站制作、中牟網(wǎng)頁(yè)設(shè)計(jì)、中牟網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造中牟網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供中牟網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

（學(xué)習(xí)視頻推薦：css視頻教程）

二、實(shí)現(xiàn)原理

看到上圖效果應(yīng)該很容易猜到原理，純CSS的話使用輪播。通過(guò)改變圖片的margin-top，再加上億點(diǎn)點(diǎn)動(dòng)畫，億點(diǎn)點(diǎn)數(shù)字圖片，就實(shí)現(xiàn)了。

使用PS建數(shù)字圖片：

然后

架結(jié)構(gòu)

三、實(shí)現(xiàn)細(xì)節(jié)

1、純CSS輪播論壇里有很多這里就不細(xì)講啦！

總之就是利用輪播的效果，讓圖片由下至上的動(dòng)畫實(shí)現(xiàn)

2、倒序擺放圖片，因?yàn)榈褂?jì)時(shí)間是由大到小的（廢話）

<div class="countdown-container">
    <div id="countdown-container-min">
        <img src="../jd/img/countdown/30.png" />
        <img src="../jd/img/countdown/29.png" />
        <img src="../jd/img/countdown/28.png" />
    </div>
</div>

3、給圖片設(shè)置一個(gè)邊框，平移時(shí)效果更佳

假設(shè)使用float: top 圖片上下之間會(huì)出現(xiàn)一些間隔。但使用float: left 同時(shí)使用容器限制，使每一張圖片換行，不會(huì)出現(xiàn)任何間隔

.countdown-container img{
    box-sizing: border-box;
    width: 25px;
    height: 40px;
    border: gray 1px solid;
    float: left;
}

4、小時(shí)和分鐘的數(shù)字切換不能一股腦讓他勻速切，得在中間加上停滯，最后用0.1%的時(shí)間讓其完成切換

@keyframes min{
    0%,
    3.13%,
    3.23% {
        margin-top: 0;
    }
 
    3.23%,
    6.36%,
    6.46% {
        margin-top: -40px;
    }

5、時(shí)、分、秒容器的高度=圖片數(shù)量*圖片高度，動(dòng)畫的總時(shí)長(zhǎng)= （圖片數(shù)量+1) * 60(h/m/s) ，記得轉(zhuǎn)換成秒哈

使用ease-out屬性值，使切圖時(shí)更加絲滑~

#countdown-container-min{
    height: 2400px;
    animation: min 1860s ease-out infinite;
}

四、全部代碼

1、HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒計(jì)時(shí)</title>
    <link rel="stylesheet" href="./css/countdown.css">
    <style>
        html{
            background-color: black;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div id="countdown-container-hour">
                <img src="../jd/img/countdown/00.png">
            </div>
        </div>
        <span id="countdown-s1">:</span>
        <div>
            <div id="countdown-container-min">
                <img src="../jd/img/countdown/30.png" />
                <img src="../jd/img/countdown/29.png" />
                <img src="../jd/img/countdown/28.png" />
                <img src="../jd/img/countdown/27.png" />
                <img src="../jd/img/countdown/26.png" />
                <img src="../jd/img/countdown/25.png" />
                <img src="../jd/img/countdown/24.png" />
                <img src="../jd/img/countdown/23.png" />
                <img src="../jd/img/countdown/22.png" />
                <img src="../jd/img/countdown/21.png" />
                <img src="../jd/img/countdown/20.png" />
                <img src="../jd/img/countdown/19.png" />
                <img src="../jd/img/countdown/18.png" />
                <img src="../jd/img/countdown/17.png" />
                <img src="../jd/img/countdown/16.png" />
                <img src="../jd/img/countdown/15.png" />
                <img src="../jd/img/countdown/14.png" />
                <img src="../jd/img/countdown/13.png" />
                <img src="../jd/img/countdown/12.png" />
                <img src="../jd/img/countdown/11.png" />
                <img src="../jd/img/countdown/10.png" />
                <img src="../jd/img/countdown/09.png" />
                <img src="../jd/img/countdown/08.png" />
                <img src="../jd/img/countdown/07.png" />
                <img src="../jd/img/countdown/06.png" />
                <img src="../jd/img/countdown/05.png" />
                <img src="../jd/img/countdown/04.png" />
                <img src="../jd/img/countdown/03.png" />
                <img src="../jd/img/countdown/02.png" />
                <img src="../jd/img/countdown/01.png" />
                <img src="../jd/img/countdown/00.png" />
            </div>
        </div>
        <span id="countdown-s2">:</span>
        <div>
            <div id="countdown-container-second">
                <img src="../jd/img/countdown/59.png" />
                <img src="../jd/img/countdown/58.png" />
                <img src="../jd/img/countdown/57.png" />
                <img src="../jd/img/countdown/56.png" />
                <img src="../jd/img/countdown/55.png" />
                <img src="../jd/img/countdown/54.png" />
                <img src="../jd/img/countdown/53.png" />
                <img src="../jd/img/countdown/52.png" />
                <img src="../jd/img/countdown/51.png" />
                <img src="../jd/img/countdown/50.png" />
                <img src="../jd/img/countdown/49.png" />
                <img src="../jd/img/countdown/48.png" />
                <img src="../jd/img/countdown/47.png" />
                <img src="../jd/img/countdown/46.png" />
                <img src="../jd/img/countdown/45.png" />
                <img src="../jd/img/countdown/44.png" />
                <img src="../jd/img/countdown/43.png" />
                <img src="../jd/img/countdown/42.png" />
                <img src="../jd/img/countdown/41.png" />
                <img src="../jd/img/countdown/40.png" />
                <img src="../jd/img/countdown/39.png" />
                <img src="../jd/img/countdown/38.png" />
                <img src="../jd/img/countdown/37.png" />
                <img src="../jd/img/countdown/36.png" />
                <img src="../jd/img/countdown/35.png" />
                <img src="../jd/img/countdown/34.png" />
                <img src="../jd/img/countdown/33.png" />
                <img src="../jd/img/countdown/32.png" />
                <img src="../jd/img/countdown/31.png" />
                <img src="../jd/img/countdown/30.png" />
                <img src="../jd/img/countdown/29.png" />
                <img src="../jd/img/countdown/28.png" />
                <img src="../jd/img/countdown/27.png" />
                <img src="../jd/img/countdown/26.png" />
                <img src="../jd/img/countdown/25.png" />
                <img src="../jd/img/countdown/24.png" />
                <img src="../jd/img/countdown/23.png" />
                <img src="../jd/img/countdown/22.png" />
                <img src="../jd/img/countdown/21.png" />
                <img src="../jd/img/countdown/20.png" />
                <img src="../jd/img/countdown/19.png" />
                <img src="../jd/img/countdown/18.png" />
                <img src="../jd/img/countdown/17.png" />
                <img src="../jd/img/countdown/16.png" />
                <img src="../jd/img/countdown/15.png" />
                <img src="../jd/img/countdown/14.png" />
                <img src="../jd/img/countdown/13.png" />
                <img src="../jd/img/countdown/12.png" />
                <img src="../jd/img/countdown/11.png" />
                <img src="../jd/img/countdown/10.png" />
                <img src="../jd/img/countdown/09.png" />
                <img src="../jd/img/countdown/08.png" />
                <img src="../jd/img/countdown/07.png" />
                <img src="../jd/img/countdown/06.png" />
                <img src="../jd/img/countdown/05.png" />
                <img src="../jd/img/countdown/04.png" />
                <img src="../jd/img/countdown/03.png" />
                <img src="../jd/img/countdown/02.png" />
                <img src="../jd/img/countdown/01.png" />
                <img src="../jd/img/countdown/00.png" />
            </div>
        </div>
    </div>
</body>
</html>

2、CSS

/* 倒計(jì)時(shí)器 */
.countdown{
    position: relative;
    height: 100px;
    width: 200px;
    margin: 50px;
}
 
/* 小時(shí)、分鐘、秒之間的分號(hào) : */
#countdown-s1{
    font-size: 30px;
    color: white;
    position: absolute;
    left: 67px;
    top: -3px;
}
 
#countdown-s2{
    font-size: 30px;
    color: white;
    position: absolute;
    left: 120px;
    top: -3px;
}
 
/* 倒計(jì)時(shí)器容器 */
.countdown-container{
    width: 25px;
    height: 40px;
    overflow: hidden;
    float: left;
    margin-left: 30px;
}
 
.countdown-container img{
    box-sizing: border-box;
    float: left;
    width: 25px;
    height: 40px;
    border: gray 1px solid;
}
 
/* 分鐘輪播 */
#countdown-container-min{
    height: 2400px;
    /* 31min，需播放1860s, ease-out用于圖片之間慢速停頓過(guò)渡*/
    animation: min 1860s ease-out infinite;
}
 
@keyframes min{
    0%,
    3.13%,      /*  加入停滯，使切換時(shí)的速度為0.1% */
    3.23% {
        margin-top: 0;
    }
 
    3.23%,
    6.36%,
    6.46% {
        margin-top: -40px;
    }
 
    6.46%,
    9.59%,
    9.69% {
        margin-top: -80px;
    }
 
    9.69%,
    12.82%,
    12.92%  {
        margin-top: -120px;
    }
 
    12.92%,
    16.05%,
    16.15% {
        margin-top: -160px;
    }
 
    16.15%,
    19.28%,
    19.38% {
        margin-top: -200px;
    }
  19.38%,
    22.51%,
    22.61% {
        margin-top: -240px;
    }
  22.61%,
    25.74%,
    25.84% {
        margin-top: -280px;
    }
  25.84%,
    28.97%,
    29.07% {
        margin-top: -320px;
    }
  29.07%,
    32.20%,
    32.30% {
        margin-top: -360px;
    }
  32.30%,
    35.43%,
    35.53% {
        margin-top: -400px;
    }
  35.53%,
    38.66%,
    38.76% {
        margin-top: -440px;
    }
  38.76%,
    41.89%,
    41.99% {
        margin-top: -480px;
    }
  41.99%,
    45.12%,
    45.22% {
        margin-top: -520px;
    }
  45.22%,
    48.35%,
    48.45% {
        margin-top: -560px;
    }
  48.45%,
    51.58%,
    51.68% {
        margin-top: -600px;
    }
  51.68%,
    54.81%,
    54.91% {
        margin-top: -640px;
    }
  54.91%,
    58.04%,
    58.14% {
        margin-top: -680px;
    }
  58.14%,
    61.27%,
    61.37% {
        margin-top: -720px;
    }
  61.37%,
    64.50%,
    64.60% {
        margin-top: -760px;
    }
  64.60%,
    67.73%,
    67.83% {
        margin-top: -800px;
    }
  67.83%,
    70.96%,
    71.06% {
        margin-top: -840px;
    }
  71.06%,
    74.19%,
    74.29% {
        margin-top: -880px;
    }
  74.29%,
    77.42%,
    77.52% {
        margin-top: -920px;
    }
  77.52%,
    80.65%,
    80.75% {
        margin-top: -960px;
    }
  80.75%,
    83.88%,
    83.98% {
        margin-top: -1000px;
    }
  83.98%,
    87.11%,
    87.21% {
        margin-top: -1040px;
    }
  87.21%,
    90.34%,
    90.44% {
        margin-top: -1080px;
    }
  90.44%,
    93.57%,
    93.67% {
        margin-top: -1120px;
    }
  93.67%,
    96.80%,
    96.90% {
        margin-top: -1160px;
    }
  96.90%,
    99.90%,
    100% {
        margin-top: -1200px;
    }
}
 
/* 秒輪播 */
#countdown-container-second{
    height: 2400px;
    animation: second 60s ease-out infinite;
}
 
@keyframes second {
    0%,
    1.66% {
        margin-top: 0;
    }
 
    1.66%,
    3.32% {
        margin-top: -40px;
    }
 
    3.32%,
    4.98% {
        margin-top: -80px;
    }
 
    4.98%,
    6.64% {
        margin-top: -120px;
    }
 
    6.64%,
    8.30% {
        margin-top: -160px;
    }
 
    8.30%,
    9.96% {
        margin-top: -200px;
    }
  9.96%,
    11.62% {
        margin-top: -240px;
    }
  11.62%,
    13.28% {
        margin-top: -280px;
    }
  13.28%,
    14.94% {
        margin-top: -320px;
    }
  14.94%,
    16.60% {
        margin-top: -360px;
    }
  16.60%,
    18.26% {
        margin-top: -400px;
    }
  18.26%,
    19.92% {
        margin-top: -440px;
    }
  19.92%,
    21.58% {
        margin-top: -480px;
    }
  21.58%,
    23.24% {
        margin-top: -520px;
    }
  23.24%,
    24.90% {
        margin-top: -560px;
    }
  24.90%,
    26.56% {
        margin-top: -600px;
    }
  26.56%,
    28.22% {
        margin-top: -640px;
    }
  28.22%,
    29.88% {
        margin-top: -680px;
    }
  29.88%,
    31.54% {
        margin-top: -720px;
    }
  31.54%,
    33.2% {
        margin-top: -760px;
    }
  33.20%,
    34.86% {
        margin-top: -800px;
    }
  34.86%,
    36.52% {
        margin-top: -840px;
    }
  36.52%,
    38.18% {
        margin-top: -880px;
    }
  38.18%,
    39.84% {
        margin-top: -920px;
    }
  39.84%,
    41.50% {
        margin-top: -960px;
    }
  41.50%,
    43.16% {
        margin-top: -1000px;
    }
  43.16%,
    44.82% {
        margin-top: -1040px;
    }
  44.82%,
    46.48% {
        margin-top: -1080px;
    }
  46.48%,
    48.14% {
        margin-top: -1120px;
    }
  48.14%,
    49.80% {
        margin-top: -1160px;
    }
  49.80%,
    51.46% {
        margin-top: -1200px;
    }
  51.46%,
    53.12% {
        margin-top: -1240px;
    }
  53.12%,
    54.78% {
        margin-top: -1280px;
    }
  54.78%,
    56.44% {
        margin-top: -1320px;
    }
  56.44%,
    58.10% {
        margin-top: -1360px;
    }
  58.10%,
    59.76% {
        margin-top: -1400px;
    }
  59.76%,
    61.42% {
        margin-top: -1440px;
    }
 
    61.42%,
    63.08% {
        margin-top: -1480px;
    }
              63.08%,
    64.74% {
        margin-top: -1520px;
    }
  64.74%,
    66.40% {
        margin-top: -1560px;
    }
 
    66.40%,
    68.06% {
        margin-top: -1600px;
    }
              68.06%,
    69.72% {
        margin-top: -1640px;
    }
  69.72%,
    71.38% {
        margin-top: -1680px;
    }
 
    71.38%,
    73.04% {
        margin-top: -1720px;
    }
              73.04%,
    74.70% {
        margin-top: -1760px;
    }
  74.70%,
    76.36% {
        margin-top: -1800px;
    }
 
    76.36%,
    78.02% {
        margin-top: -1840px;
    }
              78.02%,
    79.68% {
        margin-top: -1880px;
    }
  79.68%,
    81.34% {
        margin-top: -1920px;
    }
 
    81.34%,
    83.00% {
        margin-top: -1960px;
    }
              83.00%,
    84.66% {
        margin-top: -2000px;
    }
  84.66%,
    86.32% {
        margin-top: -2040px;
    }
 
    86.32%,
    87.98% {
        margin-top: -2080px;
    }
              87.98%,
    89.64% {
        margin-top: -2120px;
    }
  89.64%,
    91.30% {
        margin-top: -2160px;
    }
 
    91.30%,
    92.96% {
        margin-top: -2200px;
    }
              92.96%,
    94.62% {
        margin-top: -2240px;
    }
  94.62%,
    96.28% {
        margin-top: -2280px;
    }
 
    96.28%,
    97.94% {
        margin-top: -2320px;
    }
              97.94%,
    100% {
        margin-top: -2360px;
    }
}

相關(guān)推薦：CSS教程

本文名稱：css實(shí)現(xiàn)倒計(jì)時(shí)效果
地址分享：http://muchs.cn/article48/cjhdhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、搜索引擎優(yōu)化、企業(yè)建站、標(biāo)簽優(yōu)化、ChatGPT、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容