在写一些前端页面时需要一段时间的请求，这段时间为了不那么单调就会加上一些过度效果；例如——加载中；进度条之类的；今天写一个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>
