<div class="loading-main">
<div class="loading-letters">
<span class="letter ">L</span><span class="letter">o</span><span class="letter">a</span><span class="letter">d</span><span class="letter">i</span><span class="letter">n</span><span class="letter">g</span>
</div>
</div>
/* 启动页 */
.loading-main{
display: flex;align-items: center;
justify-content: center;
flex-direction: column;
background-color: #ffd933;
height: 100vh;
}
.loading-letters .letter{
display: inline-block;
font-weight: 900;
font-size: 50px;
text-transform: uppercase;
color: #725c25;
text-shadow: #725c25 0 0 0.05em;
}
.loading-letters .letter{
animation: jump .8s cubic-bezier(0.05, 0, 0.2, 1) 1100 alternate;
transform-origin: 50% 100%;
}
@keyframes jump {
0%{
transform: scaleY(1) scaleX(1);
text-shadow: #725c25 0 0 0.05em;
}
100%{
transform: scaleY(1.47) scaleX(0.8);
text-shadow: #725c25 0 10px 0.35em;
}
}
.loading-letters .letter:nth-child(2),
.loading-letters .letter:nth-child(7){
animation-delay: .1s;
}
.loading-letters .letter:nth-child(3),
.loading-letters .letter:nth-child(8){
animation-delay: .2s;
}
.loading-letters .letter:nth-child(4),
.loading-letters .letter:nth-child(9){
animation-delay: .3s;
}
.loading-letters .letter:nth-child(5),
.loading-letters .letter:nth-child(10){
animation-delay: .4s;
}
.loading-letters .letter:nth-child(6),
.loading-letters .letter:nth-child(11){
animation-delay: .5s;
}