<!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>