在写一些前端页面时需要一段时间的请求,这段时间为了不那么单调就会加上一些过度效果;例如——加载中;进度条之类的;今天写一个css跳动样式——加载中希望对你有所帮助
首先是文字部分
<div class="loading">
<div class="loading-icon">⌛️</div>
<div class="loading-text">
<span>正</span>
<span>在</span>
<span>载</span>
<span>入</span>
<span>...</span>
</div>
</div>
然后就是css部分了;主要就是运用css动画效果进行跳动的
/* 容器的样式 */
.loading {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
height: 100px;
width: 200px;
border: 5px solid gray;
border-radius: 10px;
font-weight: bold;
text-align: center;
font-size: 24px;
color: gray;
}
/* 跳动动画 */
@keyframes loading {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
/* 加载中文字的样式 */
.loading-text {
margin-left: 10px;
position: relative; /* 父元素需设置 position 属性才能让子元素正常定位 */
}
/* 逐一跳动的文字的样式 */
.loading-text span {
display: inline-block;
animation: loading 1s ease-in-out infinite;
}
/* 将逐一跳动的文字放在相同位置 */
.loading-text span:nth-child(2) {
animation-delay: 0.1s;
}
.loading-text span:nth-child(3) {
animation-delay: 0.2s;
}
.loading-text span:nth-child(4) {
animation-delay: 0.3s;
}
上述中如需更改跳动间隔可以再 .loading-text span:nth-child(3) { animation-delay: 0.2s; }中进行更改时间
最后是完整的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>逐一跳动的“加载中”</title>
<style>
/* 容器的样式 */
.loading {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
height: 100px;
width: 200px;
border: 5px solid gray;
border-radius: 10px;
font-weight: bold;
text-align: center;
font-size: 24px;
color: gray;
}
/* 跳动动画 */
@keyframes loading {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
/* 加载中文字的样式 */
.loading-text {
margin-left: 10px;
position: relative; /* 父元素需设置 position 属性才能让子元素正常定位 */
}
/* 逐一跳动的文字的样式 */
.loading-text span {
display: inline-block;
animation: loading 1s ease-in-out infinite;
}
/* 将逐一跳动的文字放在相同位置 */
.loading-text span:nth-child(2) {
animation-delay: 0.1s;
}
.loading-text span:nth-child(3) {
animation-delay: 0.2s;
}
.loading-text span:nth-child(4) {
animation-delay: 0.3s;
}
</style>
</head>
<body>
<div class="loading">
<div class="loading-icon">⌛️</div>
<div class="loading-text">
<span>正</span>
<span>在</span>
<span>载</span>
<span>入</span>
<span>...</span>
</div>
</div>
</body>
</html>