使用CSS實(shí)現(xiàn)數(shù)字滾動(dòng)效果，需要準(zhǔn)備一個(gè)容器，使用HTML中的div標(biāo)簽來(lái)創(chuàng)建，在div中添加一個(gè)ul標(biāo)簽，把要滾動(dòng)的數(shù)字添加到ul中，每個(gè)數(shù)字用li標(biāo)簽包裹。

CSS樣式設(shè)置

div{
    width: 300px;
    height: 100px;
    overflow: hidden;
    position: relative;
}
ul{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    animation: scroll 10s linear infinite;
}
li{
    float: left;
    width: 100%;
    height: 100%;
    font-size: 80px;
    line-height: 100px;
    text-align: center;
}
@keyframes scroll{
    0%{
        top: 0;
    }
    100%{
        top: -100%;
    }
}

上面的代碼中，為div設(shè)置寬高，設(shè)置overflow：hidden屬性，使ul不超出div的范圍；為ul設(shè)置寬高，設(shè)置position：absolute，使ul可以移動(dòng)；設(shè)置li的寬高，和字體大小，以及文本居中顯示；設(shè)置動(dòng)畫(huà)，把ul從上往下滾動(dòng)，實(shí)現(xiàn)數(shù)字滾動(dòng)的效果。

使用CSS實(shí)現(xiàn)數(shù)字滾動(dòng)效果，只需要在div中添加ul，把要滾動(dòng)的數(shù)字添加到ul中，設(shè)置一些CSS樣式，就可以實(shí)現(xiàn)數(shù)字滾動(dòng)的效果。

千鋒教育是高品質(zhì)web前端培訓(xùn)機(jī)構(gòu)，千鋒教育擁有大量實(shí)力web前端培訓(xùn)講師，提供優(yōu)質(zhì)的web培訓(xùn)課程，web前端培訓(xùn)，歡迎報(bào)名千鋒教育。