<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: monospace;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
100%;
height: 30vh;
z-index: 100;
background: white;
background: linear-gradient(0deg, white 75%, rgba(255, 255, 255, 0.9) 80%, rgba(255, 255, 255, 0.25) 95%, rgba(255, 255, 255, 0) 100%);
}
.text {
font-size: 100px;
display: flex;
position: absolute;
bottom: 20vh;
left: 50%;
transform: translateX(-50%);
user-select: none;
}
.text .wrapper {
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
}
.text .wrapper .letter {
transition: ease-out 1s;
transform: translateY(10%);
}
.text .wrapper .shadow {
transform: scale(1, -1);
color: #999;
transition: ease-in 5s, ease-out 5s;
}
/* .text .wrapper:hover .letter {
transform: translateY(-200%);
}
.text .wrapper:hover .shadow {
opacity: 0;
transform: translateY(200%);
} */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="text"></div>
</body>
<script>
var str = 'LOADING',
arr = [],
html = '';
for (let i = 0; i < str.length; i++) {
const val = str[i];
arr.push(i)
html += `<div class="wrapper">
<div id="letter-${i}" class="letter">${val}</div>
<div id='shadow-${i}' class="shadow">${val}</div>
</div>`;
}
document.querySelector('.text').innerHTML = html;
// 闭包是为了访问函数内部的变量而实现循环效果
function Loading() {
var index = 0;
function changePosition(val) {
console.log(val);
var current_letter = document.querySelector(`#letter-${val}`);
var current_shadow = document.querySelector(`#shadow-${val}`);
current_letter.style.transform = 'translateY(-100%)';
current_shadow.style.transform = 'translateY(100%)';
setTimeout(() => {
current_letter.style.transform = 'translateY(10%)';
current_shadow.style.transform = 'translateY(0%)';
}, 1000);
setTimeout(() => {
index += 1;
if (index >= arr.length) {
index = 0;
}
changePosition(arr[index]);
}, 500);
}
return changePosition;
}
setTimeout(() => {
Loading()(arr[0])
}, 500);
</script>
</html>