最近在實現一個顯示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兩個數字。
<div class="num_span">
<span class="right">0123456789</span>
<span class="middle">0123456789</span>
<span class="left">12</span>
</div>接下來添加其CSS樣式，我們需要將文字的書寫方向改為從上至下，且字符方向是豎直的。使用wrting-mode樣式可以改變文字的書寫方向，使用text-orientation可以實現行內字符的旋轉。
.num_span span {
float: right;
/* 書寫模式 */
writing-mode: vertical-rl;
/* 控制行內字符的旋轉 */
text-orientation: upright;
}此時，效果如圖
然后我們將外層容器設置為over-flow:hidden，再添加一點JS即可實現數字的滾動效果。主要思路為，通過js分別得到數字個位、十位、百位上的數字，並改變對應的margin—top即可。需要注意的是，在數字小於10時，需額外處理一下十位數字的margin-top值，使十位上的數字隱藏。完整的代碼如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RollingNumber</title>
<style>
.input_center{
display: block;
margin: 50px auto 0;
}
.num_span {
border: 1px solid #911004;
width: 64px;
overflow: hidden;
font-size: 20px;
height: 20px;
margin: 10px auto;
}
.num_span span {
float: right;
width: 20px;
/* 書寫模式*/
writing-mode: vertical-rl;
/* 控制行內字符的旋轉*/
text-orientation: upright;
margin-top: 0em;
-webkit-transition: margin-top 1.5s ease-out;
-o-transition: margin-top 1.5s ease-out;
transition: margin-top 1.5s ease-out;
}
</style>
</head>
<body>
<input type="text" class="input_center" id="valueRGB" placeholder="請輸入0-255之間的數字">
<div class="num_span">
<span class="right">0123456789</span>
<span class="middle">0123456789</span>
<span class="left">12</span>
</div>
<script src="jquery-1.11.3.js"></script>
<script>
function animate_RGB(rgb){
let arr = [];
arr.push(parseInt(rgb/100));
arr.push(parseInt(rgb%100/10));
arr.push(parseInt(rgb%10));
let $div = $(".num_span");
$div.find('.left').css('margin-top',-arr[0]+1+'em')
$div.find('.middle').css('margin-top',-arr[1]+'em')
$div.find('.right').css('margin-top',-arr[2]+'em');
if(rgb<10){
$div.find('.middle').css('margin-top','1em');
}
}
$("#valueRGB").on("change",function(){
let val = parseInt($(this).val());
if(val>=0&&val<256){
console.log(val);
animate_RGB($(this).val());
}
});
</script>
</body>
</html>