你从未见过如此炫酷的加载动画。
演示
视频教程 -
让我们开始编程吧
你好，很高兴你来到这里。我是 Kunaal，今天我们将学习如何制作一个你从未见过的炫酷加载动画。你可以在下方看到演示。
演示
视频教程 -
如果您觉得这篇文章难以理解，或者需要更详细的解释，可以观看视频教程。
如果您喜欢这个视频教程，请考虑订阅我的YouTube频道。
让我们开始编程吧
在 HTML 文件中的<body>标签下写入
<div class="loading-container">
<div class="shutter top">
<h1 class="loading-text"></h1>
</div>
<div class="shutter bottom">
<h1 class="loading-text"></h1>
</div>
</div>
<header class="landing-page">
</header>
还可以添加一些样式。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--loading-text-size: 12vw;
}
body{
width: 100%;
height: 100vh;
position: relative;
font-family: 'roboto', sans-serif;
}
.landing-page{
position: relative;
width: 100%;
height: 100%;
background: url(bg.jpeg);
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.loading-container{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: 99;
}
.shutter{
position: relative;
left: 0;
width: 100%;
height: 50%;
background-color: #0a0a0a;
overflow: hidden;
}
.shutter.top{
top: 0;
animation: slide-top 5s 4s forwards 1;
}
.shutter.bottom{
bottom: 0;
animation: slide-bottom 5s 4s forwards 1;
}
.loading-text{
position: absolute;
text-transform: uppercase;
background: url(bg.jpeg);
background-size: cover;
background-attachment: fixed;
background-position: center;
color: #fff;
width: 100%;
height: 100%;
text-align: center;
font-size: var(--loading-text-size);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.top .loading-text{
padding-top: calc(50vh - var(--loading-text-size)/ 1.6);
}
.bottom .loading-text{
margin-top: calc(-1 * var(--loading-text-size)/ 1.6);
height: calc(100% + var(--loading-text-size)/ 1.6);
}
@keyframes slide-top{
100%{
top: -100%;
}
}
@keyframes slide-bottom{
100%{
bottom: -100%;
}
}
/* media query */
@media (max-width: 996px){
:root{
--loading-text-size: 130px;
}
}
@media (max-width: 750px){
:root{
--loading-text-size: 100px;
}
}
@media (max-width: 500px){
:root{
--loading-text-size: 80px;
}
}
最后添加JS
const loadingText = [...document.querySelectorAll('.loading-text')];
let text = 'loading';
for(let i = 0; i < text.length; i++){
setTimeout(() => {
loadingText[0].innerHTML += text[i];
loadingText[1].innerHTML += text[i];
}, 500 * i);
}
完成了。动画已经制作完成。如果您想更清楚地了解它，请务必观看教程视频。
希望你都理解了。如果你有任何疑问，或者发现我犯了任何错误，或者有任何建议，请随时在评论区留言。
文章来源：https://dev.to/themodernweb/how-to-make-this-awesome-loading-animation-136l如果你对编程感兴趣，想了解我这个15岁的少年是如何编写代码并设计出这些作品的，可以关注我的Instagram账号。我也计划在Instagram上分享我的游戏开发成果。