使用CSS實現數字滾動效果,需要準備一個容器,使用HTML中的div標簽來創建,在div中添加一個ul標簽,把要滾動的數字添加到ul中,每個數字用li標簽包裹。
CSS樣式設置
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設置寬高,設置overflow:hidden屬性,使ul不超出div的范圍;為ul設置寬高,設置position:absolute,使ul可以移動;設置li的寬高,和字體大小,以及文本居中顯示;設置動畫,把ul從上往下滾動,實現數字滾動的效果。
使用CSS實現數字滾動效果,只需要在div中添加ul,把要滾動的數字添加到ul中,設置一些CSS樣式,就可以實現數字滾動的效果。
千鋒教育是高品質web前端培訓機構,千鋒教育擁有大量實力web前端培訓講師,提供優質的web培訓課程,web前端培訓,歡迎報名千鋒教育。