資訊專欄INFORMATION COLUMN
摘要：最近在實現(xiàn)一個顯示顏色數(shù)值的動畫效果時，嘗試使用了書寫模式及來實現(xiàn)文字的豎直方向的排列，并借助的過渡來實現(xiàn)動畫效果。書寫模式控制行內(nèi)字符的旋轉(zhuǎn)此時，效果如圖然后我們將外層容器設(shè)置為，再添加一點即可實現(xiàn)數(shù)字的滾動效果。
最近在實現(xiàn)一個顯示RGB顏色數(shù)值的動畫效果時，嘗試使用了writing-mode(書寫模式)及 text-orientation來實現(xiàn)文字的豎直方向的排列，并借助CSS的transition(過渡)來實現(xiàn)動畫效果。關(guān)于書寫模式，參考鏈接[鏈接描述]1
各瀏覽器對writing-mode的支持情況，可在Can I use中查看，而對text-orientation的支持情況在Can I use中暫不能查到，根據(jù)筆者的測試，Chrome/FF/Opera均支持此樣式，而IE/Edge都不支持。暫未在Safari中測試，歡迎各位補充。
首先，創(chuàng)建數(shù)字的容器。因為RGB顏色的范圍是0~255，因此百位數(shù)字僅需1、2兩個數(shù)字。
0123456789 0123456789 12
接下來添加其CSS樣式，我們需要將文字的書寫方向改為從上至下，且字符方向是豎直的。使用wrting-mode樣式可以改變文字的書寫方向，使用text-orientation可以實現(xiàn)行內(nèi)字符的旋轉(zhuǎn)。
.num_span span {
float: right;
/* 書寫模式 */
writing-mode: vertical-rl;
/* 控制行內(nèi)字符的旋轉(zhuǎn) */
text-orientation: upright;
}
此時，效果如圖
然后我們將外層容器設(shè)置為over-flow:hidden，再添加一點JS即可實現(xiàn)數(shù)字的滾動效果。主要思路為，通過js分別得到數(shù)字個位、十位、百位上的數(shù)字，并改變對應的margin—top即可。需要注意的是，在數(shù)字小于10時，需額外處理一下十位數(shù)字的margin-top值，使十位上的數(shù)字隱藏。完整的代碼如下。
RollingNumber
0123456789
0123456789
12
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/82226.html
摘要：最近在實現(xiàn)一個顯示顏色數(shù)值的動畫效果時，嘗試使用了書寫模式及來實現(xiàn)文字的豎直方向的排列，并借助的過渡來實現(xiàn)動畫效果。書寫模式控制行內(nèi)字符的旋轉(zhuǎn)此時，效果如圖然后我們將外層容器設(shè)置為，再添加一點即可實現(xiàn)數(shù)字的滾動效果。 最近在實現(xiàn)一個顯示RGB顏色數(shù)值的動畫效果時，嘗試使用了writing-mode(書寫模式)及 text-orientation來實現(xiàn)文字的豎直方向的排列，并借助CSS的...
摘要：有個實現(xiàn)數(shù)字滾動的需求，想著肯定有很多這種效果的插件，就不自己造輪子了，于是，找了個數(shù)字滾動插件，還挺好用，很簡單，剛好符合需求。另外，提示一句，改變數(shù)字的字號大小，需要修改的中的字號的比例要把握好，一不小心就壞了，呵呵，親身體會 有個實現(xiàn)數(shù)字滾動的需求，想著肯定有很多這種效果的插件，就不自己造輪子了，于是，找了個numberAnimate js數(shù)字滾動插件，還挺好用，很簡單，剛好符合...
閱讀 2361·2023-04-25 19:27
閱讀 3491·2021-11-24 09:39
閱讀 3906·2021-10-08 10:17
閱讀 3397·2019-08-30 13:48
閱讀 1930·2019-08-29 12:26
閱讀 3121·2019-08-28 17:52
閱讀 3537·2019-08-26 14:01
閱讀 3534·2019-08-26 12:19
