html+css3+js实现古诗词淡出效果

本文链接：https://blog.csdn.net/Infatuatedmonkey/article/details/124238230

参考与https://ke.qq.com/webcourse/417875/100498562#taid=10178939347951699&vid=387702291995618378
如有侵权还请速速联系
1，效果图
古诗词淡出
2，源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>古诗词淡入</title>
		<style>
			.box{
				margin: 50px auto;
				/* 文本排列方式*/
				/* 垂直排列，从右到左 */
				/* 内容会自动居中 */
				writing-mode:vertical-rl;
			}
			/* 通过透明度实现淡出效果 */
			.box span{
				opacity: 0;
				transition: opacity 0.5s;
			}
		</style>
	</head>
	<body>
		<div class="box">
		</div>
		<script>
			var arr = ["关关雎鸠","在河之洲","窈窕淑女","君子好逑"];
			var box = document.querySelector('.box');
			var oSpanArr = [];
			// 创建每一列的结构
			arr.forEach(function(item){
				var oP = document.createElement('p');
				for(var i = 0; i < item.length; i++){
					// itme[i]
					//创建包裹每一个文字的元素
					var oSpan = document.createElement('span');
					//在元素中添加内容
					oSpan.innerText = item[i];
					//将文字添加到每一列中
					oSpanArr.push(oSpan)
					oP.appendChild(oSpan);
				}
				// 把每一列中的数据插入到页面当中去
				box.appendChild(oP);
			})
			// 等到页面渲染成功之后，添加透明度从而实现动画效果
			setTimeout(function(){
				oSpanArr.forEach(function(item,index){
					// 添加动画延迟时间
					item.style.transitionDelay = index*0.5 + 's';
					item.style.opacity = 1;
				})
			},500);
			
		</script>
	</body>
</html>