CSS3 文字掉落效果

最新推荐文章于 2023-10-26 11:19:50 发布

山庄夜话

最新推荐文章于 2023-10-26 11:19:50 发布

阅读量500

点赞数

本文链接：https://blog.csdn.net/qq_42981665/article/details/130692151

版权

该文章展示了一个使用HTML、CSS和JavaScript创建的诗词滚动动画效果。通过设置CSS样式和JavaScript函数，将诗句倒序排列并逐字显现，营造出从天空飘落的效果。动画以苏轼的《水调歌头》为例，动态显示诗词内容。

摘要由CSDN通过智能技术生成


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<style>
body,html{
	overflow: hidden;
	background-image: url('./moon.jpeg');
	background-position: -300px -60px;
}
#app{
	margin: 0;
	margin-left: 230px;
	padding:0;
	left:0px;
	top:0px;
	width:100vw;
	height:100vh;
	transform-style:preserve-3d;
	perspective:500px;
	overflow: hidden;
	color:white;
}
ul,li{
	list-style-type:none;
	width: 20px;
}
ul{
	position: relative;
	float: left;
	margin-left: .3em;
	padding:.3em;
	top: 600px;
}
li{
	position: relative;
	transform-origin:center;
	transform:rotateY(0deg);
	animation:downText 2s ease-out 0s both;		
	width: 20px;
	text-align: center;
}

@keyframes downText{
	0%{
		transform:scale(1,3) translateY(-300px);
		opacity: 0;
	}
	100%{
		transform:rotateY(360deg) translateY(0px);
		opacity: 1;
	}
}
</style>
</head>
<body>
<div id="app">

</div>
<script>
	function test(i,text){
		let texts=text
		texts=texts.split("").reverse().join("")
		let index=0;
		let t=setInterval(()=>{
			let ul=document.querySelectorAll("ul")[i]
			let lis=ul.querySelectorAll("li")

			let li=document.createElement("li")
			li.innerHTML=texts[index]
			ul.insertBefore(li,lis[0])
			index++
			if(index>=texts.length){
				clearInterval(t)
			}
		},300)
	}

	function Pro(t,i,txt){
		return new Promise(reject=>{
			setTimeout(()=>{
				reject(new test(i,txt))
			},t)
		})
	}

	var txt = [
		"明月几时有，",
		"把酒问青天，",
		"不知天上宫阙，",
		"今夕是何年？",
		"我欲乘风归去，",
		"又恐琼楼玉宇，",
		"高处不胜寒。",
		"起舞弄清影，",
		"何似在人间。",
		"转朱阁，",
		"低绮户，",
		"照无眠。",
		"不应有恨，",
		"何事长向别时圆？",
		"人有悲欢离合，",
		"月有阴晴圆缺，",
		"此事古难全。",
		"但愿人长久，",
		"千里共婵娟。",
	]

	txt=txt.reverse()
	// 根据上面的数组创建一个数字数组，并随机排序
	var arr = [...Array(txt.length).keys()]
	arr.sort(()=>Math.random() - 0.5)

	let app=document.querySelectorAll("#app")[0]
	for(let i=0;i<arr.length;i++){
		app.innerHTML+="<ul><li></li></ul>"
	}



	for(let i=0;i<arr.length;i++){
		Pro(Math.random()*1000,arr[i],txt[arr[i]])
	}


</script>
</body>

</html>