利用CSS3实现闪烁跳跃的进度条

本篇内容主要讲解“利用CSS3实现闪烁跳跃的进度条”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“利用CSS3实现闪烁跳跃的进度条”吧!

创新互联-专业网站定制、快速模板网站建设、高性价比丹棱网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式丹棱网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖丹棱地区。费用合理售后完善，十余年实体公司更值得信赖。

今天为大家带来一款具个性化的进度条：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实现闪烁跳跃的进度条”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

分享标题：利用CSS3实现闪烁跳跃的进度条
分享网址：https://www.cdcxhl.com/article20/pcgijo.html

成都网站建设公司_创新互联，为您提供品牌网站建设、网站维护、搜索引擎优化、面包屑导航、定制网站、ChatGPT

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联