<!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>
【小实战】——诗词渲染(诗句逐字出现)
猜你喜欢
转载自www.cnblogs.com/hjysunshine/p/12206270.html
今日推荐
周排行