本篇内容主要讲解“利用CSS3实现闪烁跳跃的进度条”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“利用CSS3实现闪烁跳跃的进度条”吧!
今天为大家带来一款具个性化的进度条：CSS3闪烁跳跃的进度条。
HTML结构代码
<div class="center"> <ul> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> </ul> </div>CSS样式代码
@keyframes bump { 0% { opacity: 0; left: 535px; } 100% { left: -10px; opacity: 0; } 10%, 85% { opacity: 1; } } @keyframes spin { 0%, 100% { height: 20px; top: 50px; } 50% { height: 100px; top: 0; } } body { background: rgba(0, 0, 0, 0.2); } div.center { text-align: center; margin-top: 40px; } ul { background-color: rgba(255, 255, 255, 0.4); position: relative; display: block; padding: 0; margin: auto; width: 600px; height: 10px; list-style: none; border-radius: 200px; border: 5px solid rgba(255, 255, 255, 0.2); margin-top: 100px; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1); } ul li { position: absolute; margin-top: -55px; } ul li:nth-child(1) { animation: bump 1.5s infinite; animation-delay: 0.1s; } ul li:nth-child(1) div { border-radius: 22px; transform-origin: center; position: absolute; height: 60px; width: 80px; animation: spin 0.4s infinite; animation-delay: 0.1s; background-color: rgba(120, 120, 120, 0.3); } ul li:nth-child(2) { animation: bump 1.5s infinite; animation-delay: 0.2s; } ul li:nth-child(2) div { border-radius: 22px; transform-origin: center; position: absolute; height: 60px; width: 80px; animation: spin 0.4s infinite; animation-delay: 0.2s; background-color: rgba(120, 0, 0, 0.3); } ul li:nth-child(3) { animation: bump 1.5s infinite; animation-delay: 0.3s; } ul li:nth-child(3) div { border-radius: 22px; transform-origin: center; position: absolute; height: 60px; width: 80px; animation: spin 0.4s infinite; animation-delay: 0.3s; background-color: rgba(120, 120, 0, 0.3); } ul li:nth-child(4) { animation: bump 1.5s infinite; animation-delay: 0.4s; } ul li:nth-child(4) div { border-radius: 22px; transform-origin: center; position: absolute; height: 60px; width: 80px; animation: spin 0.4s infinite; animation-delay: 0.4s; background-color: rgba(0, 120, 0, 0.3); } ul li:nth-child(5) { animation: bump 1.5s infinite; animation-delay: 0.5s; } ul li:nth-child(5) div { border-radius: 22px; transform-origin: center; position: absolute; height: 60px; width: 80px; animation: spin 0.4s infinite; animation-delay: 0.5s; background-color: rgba(0, 120, 120, 0.3); } ul li:nth-child(6) { animation: bump 1.5s infinite; animation-delay: 0.6s; } ul li:nth-child(6) div { border-radius: 22px; transform-origin: center; position: absolute; height: 60px; width: 80px; animation: spin 0.4s infinite; animation-delay: 0.6s; background-color: rgba(0, 0, 120, 0.3); } ul li:nth-child(7) { animation: bump 1.5s infinite; animation-delay: 0.7s; } ul li:nth-child(7) div { border-radius: 22px; transform-origin: center; position: absolute; height: 60px; width: 80px; animation: spin 0.4s infinite; animation-delay: 0.7s; background-color: rgba(120, 0, 120, 0.3); }注：请自行在所需之处加上浏览器前缀（如：-webkit- 、 -moz-），否则将不能正常显示效果。
到此，相信大家对“利用CSS3实现闪烁跳跃的进度条”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
