如何使用CSS實現(xiàn)數(shù)字滾動效果

使用CSS實現(xiàn)數(shù)字滾動效果，需要準備一個容器，使用HTML中的div標簽來創(chuàng)建，在div中添加一個ul標簽，把要滾動的數(shù)字添加到ul中，每個數(shù)字用li標簽包裹。

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可以移動；設(shè)置li的寬高，和字體大小，以及文本居中顯示；設(shè)置動畫，把ul從上往下滾動，實現(xiàn)數(shù)字滾動的效果。

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

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