css3 特效loading 加载页面,css3字母特效缩略图
<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;
}

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注