JS CSS實現數字滾動

2022-08-05 16:15:16 字數 786 閱讀 1878

最近在實現一個顯示rgb顏色數值的動畫效果時,嘗試使用了writing-mode(書寫模式)及 text-orientation來實現文字的豎直方向的排列,並藉助css的transition(過渡)來實現動畫效果。關於書寫模式,參考連結[連結描述]1

各瀏覽器對writing-mode的支援情況,可在can i use中檢視,而對text-orientation的支援情況在can i use中暫不能查到,根據筆者的測試,chrome/ff/opera均支援此樣式,而ie/edge都不支援。暫未在safari中測試,歡迎各位補充。

首先,建立數字的容器。因為rgb顏色的範圍是0~255,因此百位數字僅需1、2兩個數字。

0123456789

0123456789

12

接下來新增其css樣式,我們需要將文字的書寫方向改為從上至下,且字元方向是豎直的。使用wrting-mode樣式可以改變文字的書寫方向,使用text-orientation可以實現行內字元的旋轉。

.num_span span
此時,效果如圖

然後我們將外層容器設定為over-flow:hidden,再新增一點js即可實現數字的滾動效果。主要思路為,通過js分別得到數字個位、十位、百位上的數字,並改變對應的margin—top即可。需要注意的是,在數字小於10時,需額外處理一下十位數字的margin-top值,使十位上的數字隱藏。完整的**如下。

0123456789

0123456789

12