<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.poleList {
writing-mode: vertical-rl;
font-size: 30px;
color: darkmagenta;
letter-spacing: 10px;
}
.poleList span {
opacity: 0;
transition: opacity 0.5s;
}
</style>
</head>
<body>
<div class="poleList">
</div>
<script type="text/javascript">
var pole = ['明妃初嫁与胡儿，','毡车百辆皆胡姬。','含情欲语独无处，','传与琵琶心自知。','黄金杆拨春风手，','弹看飞鸿劝胡酒。','汉宫侍女暗垂泪，','沙上行人却回首。','汉恩自浅胡恩深，','人生乐在相知心。','可怜青冢已芜没，','尚有哀弦留至今。'];
var poleList = document.getElementsByClassName('poleList')[0],
listLen = pole.length,
allLen = 0;
for(var i = 0; i < listLen; i ++) {
var pPole = document.createElement('p'),
letterLen = pole[i].length;
allLen += letterLen;
for(var j = 0; j < letterLen; j ++) {
var spanPole = document.createElement('span'),
intv = (allLen - (letterLen - j)) * 500;
spanPole.innerText = pole[i][j];
(function(spanPole, intv) {
setTimeout(function() {
spanPole.style.opacity = 1;
},intv);
}(spanPole, intv));
pPole.appendChild(spanPole);
}
poleList.appendChild(pPole);
}
</script>
</body>
</html>
