原码笔记

原码笔记

基于CSS3实现的几个小loading效果

小诸哥 0

这篇文章主要介绍了CSS3实现的几个小loading效果 ,需要的朋友可以参考下

css3实现的几个小loading效果

昨晚上闲的没事突然想做几个小loading效果，下面是昨晚上做的几个小案例，分享给大家

　　　　1.水波loading：这个loading是我觉得非常简单，但是看上去的效果却非常不错的一个小loading

 

　　　　 这个是效果图片

　　　　下面我直接把代码放上来，大家需要的可以直接拉走

               核心思想：（旋转，以及overflow:hidden属性），可以把代码中的overflow属性注释掉，保准你看一眼明白了，看不明白回来找我，我对你负责

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.      <title>Document</title>
  8.      <style>
  9.          * {
  10.              margin: 0;
  11.              padding: 0
  12.          }
  13.          body {
  14.              background-color: black
  15.          }
  16.          .box {
  17.              margin: 200px auto;
  18.              height: 50px;
  19.              width: 50px;
  20.              border-radius: 10px;
  21.              background-color: rgb(0, 174, 255);
  22.              position: relative;
  23.              overflow: hidden;
  24.              border: 1px solid rgb(0, 174, 255);
  25.              border-top: none;
  26.          }
  27.          .a {
  28.              width: 200px;
  29.              height: 200px;
  30.              background: black;
  31.              position: absolute;
  32.              left: -80px;
  33.              top: -180px;
  34.              border-radius: 80px;
  35.              animation: xuanzhuan 5s linear infinite;
  36.              z-index: 2
  37.          }
  38.          @keyframes xuanzhuan{
  39.              0%{transform: rotate(0deg)}
  40.              100%{transform: rotate(360deg)}
  41.          }
  42.      </style>
  43. </head>
  44. <body>
  45.      <div class="box">
  46.          <div class="a"></div>
  47.          <div class="b"></div>
  48.      </div>
  49. </body>
  50. </html>　

　　2.普通的圆形loading    这个也很简单  没啥好说的，直接上代码了

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.      <title>Document</title>
  8.      <style>
  9.      *{margin: 0;padding: 0}
  10.      li{list-style: none}
  11.      body,html{
  12.          background-color: black;
  13.      }
  14.      ul{
  15.          height: 40px;
  16.          width: 200px;
  17.          margin: 50px auto;
  18.      }
  19.      ul>li{
  20.          float: left;
  21.          height: 20px;
  22.          width: 20px;
  23.          border-radius: 50%;
  24.          background: white;
  25.          margin-left: 10px;
  26.          animation: move 2s infinite alternate;
  27.          transform: scale(0.5)
  28.      }
  29.      ul>li:nth-of-type(2){
  30.          animation-delay: 0.5s;
  31.      }
  32.      ul>li:nth-of-type(3){
  33.          animation-delay:1s;
  34.      }
  35.      @keyframes move{
  36.          0%{transform: scale(0.5);opacity: 0.5}
  37.          100%{transform: scale(1);opacity: 1;}
  38.      }
  39.      </style>
  40. </head>
  41. <body>
  42.      <ul>
  43.          <li></li>
  44.          <li></li>
  45.          <li></li>
  46.      </ul>
  47. </body>
  48. </html>

　　3.圆形转圈loading

　　思想（把小圆用定位排成圆形，再给每个上添加动画，用delay控制延迟事件即可）

  1. <!DOCTYPE html>
  2. <html>
  3.      <head>
  4.          <meta charset="utf-8" />
  5.          <title></title>
  6.      </head>
  7.      <style>
  8.          *{
  9.              margin: 0;
  10.              padding: 0;
  11.          }
  12.          .d1{
  13.              width: 50px;
  14.              height: 50px;
  15.              position: absolute;
  16.              margin: 100px;
  17.          }
  18.          .d1 p{
  19.              width: 14px;
  20.              height: 14px;
  21.              border-radius: 50%;
  22.              background: red;
  23.              position: absolute;
  24.              animation: dong 1.5s linear infinite;
  25.          }
  26.          .d1 p:nth-child(1){
  27.              top: 0;
  28.              left: 0;
  29.          }
  30.          .d1 p:nth-child(2){
  31.              top: 0;
  32.              right: 0;
  33.          }
  34.          .d1 p:nth-child(3){
  35.              right: 0;
  36.              bottom: 0;
  37.          }
  38.          .d1 p:nth-child(4){
  39.              bottom: 0;
  40.              left: 0;
  41.          }
  42.          .d1:nth-of-type(2){
  43.              transform: rotate(45deg);
  44.          }
  45.          @keyframes dong{
  46.              0%{
  47.                  transform: scale(0);
  48.              }
  49.              50%{
  50.                  transform: scale(1);
  51.              }
  52.              100%{
  53.                  transform: scale(0);
  54.              }
  55.          }
  56.          .d1:nth-of-type(1) p:nth-of-type(1){
  57.              /*负值:动画直接开始,但跳过前...秒动画*/
  58.              animation-delay: -0.1s;
  59.          }
  60.          .d1:nth-of-type(2) p:nth-of-type(1){
  61.              animation-delay: -0.3s;
  62.          }
  63.          .d1:nth-of-type(1) p:nth-of-type(2){
  64.              animation-delay: -0.5s;
  65.          }
  66.          .d1:nth-of-type(2) p:nth-of-type(2){
  67.              animation-delay: -0.7s;
  68.          }
  69.          .d1:nth-of-type(1) p:nth-of-type(3){
  70.              animation-delay: -0.9s;
  71.          }
  72.          .d1:nth-of-type(2) p:nth-of-type(3){
  73.              animation-delay: -1.1s;
  74.          }
  75.          .d1:nth-of-type(1) p:nth-of-type(4){
  76.              animation-delay: -1.3s;
  77.          }
  78.          .d1:nth-of-type(2) p:nth-of-type(4){
  79.              animation-delay: -1.5s;
  80.          }
  81.      </style>
  82.      <body>
  83.          <div class="d1">
  84.              <p></p>
  85.              <p></p>
  86.              <p></p>
  87.              <p></p>
  88.          </div>
  89.          <div class="d1">
  90.              <p></p>
  91.              <p></p>
  92.              <p></p>
  93.              <p></p>
  94.          </div>
  95.      </body>
  96. </html>

  　　4.交叉效果

　　　　这个稍微复杂一点，其实只要捋明白思路，也挺简单的（PS：大家可以把动画挨个取消试试，你就会发现好像并不是很难）

  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="renderer" content="webkit">
  6. </head>
  7. <body>
  8.      <style>
  9.          body {
  10.              background-color: #F5F5F5;
  11.              padding: 100px 120px;
  12.          }
  13.          .box {
  14.              margin-left: 500px;
  15.              display: block;
  16.              width: 64px;
  17.              height: 64px;
  18.              transform-origin: 16px 16px;
  19.              /* 旋转 */
  20.              animation: xuanzhuan 5s infinite;
  21.          }
  22.          /* 平移 */
  23.          .ping {
  24.              animation: pingyi 2.5s infinite;
  25.              position: absolute;
  26.          }
  27.          .hang {
  28.              width: 64px;
  29.              height: 24px;
  30.              position: absolute;
  31.          }
  32.          .hang:nth-child(0) {
  33.              transform: rotate(0deg);
  34.          }
  35.          .hang:nth-child(1) {
  36.              transform: rotate(90deg);
  37.          }
  38.          .hang:nth-child(2) {
  39.              transform: rotate(180deg);
  40.          }
  41.          .hang:nth-child(3) {
  42.              transform: rotate(270deg);
  43.          }
  44.          /* 第一个小珠子 */
  45.          .ping:nth-child(1) {
  46.              width: 8px;
  47.              height: 8px;
  48.              top: 50%;
  49.              left: 50%;
  50.              margin-top: -4px;
  51.              margin-left: -4px;
  52.              border-radius: 4px;
  53.              animation-delay: -0.3s;
  54.          }
  55.          /* 第二个小珠子 */
  56.          .ping:nth-child(2) {
  57.              width: 16px;
  58.              height: 16px;
  59.              top: 50%;
  60.              left: 50%;
  61.              margin-top: -8px;
  62.              margin-left: -8px;
  63.              border-radius: 8px;
  64.              -webkit-animation-delay: -0.6s;
  65.              animation-delay: -0.6s;
  66.          }
  67.              /* 第三个小珠子 */
  68.          .ping:nth-child(3) {
  69.              width: 24px;
  70.              height: 24px;
  71.              top: 50%;
  72.              left: 50%;
  73.              margin-top: -12px;
  74.              margin-left: -12px;
  75.              border-radius: 12px;
  76.              animation-delay: -0.9s;
  77.          }
  78.          .blue {
  79.              background-color: #1f4e5a;
  80.          }
  81.          .red {
  82.              background-color: #ff5955;
  83.          }
  84.          .yellow {
  85.              background-color: #ffb265;
  86.          }
  87.          .green {
  88.              background-color: #00a691;
  89.          }
  90.          @keyframes xuanzhuan {
  91.              0% { transform: rotate(0deg);}
  92.              100% { transform: rotate(360deg);}
  93.          }
  94.          @keyframes pingyi {
  95.              0% {transform: translateX(0);}
  96.                  25% { transform: translateX(-64px); }
  97.              75% { transform: translateX(32px);}
  98.              100% {transform: translateX(0);}
  99.          }
  100.      </style>
  101.          <div class="box">
  102.              <div class="hang">
  103.                  <div class="ping blue"></div>
  104.                  <div class="ping blue"></div>
  105.                  <div class="ping blue"></div>
  106.              </div>
  107.              <div class="hang">
  108.                  <div class="ping yellow"></div>
  109.                  <div class="ping yellow"></div>
  110.                  <div class="ping yellow"></div>
  111.              </div>
  112.              <div class="hang">
  113.                  <div class="ping red"></div>
  114.                  <div class="ping red"></div>
  115.                  <div class="ping red"></div>
  116.              </div>
  117.              <div class="hang">
  118.                  <div class="ping green"></div>
  119.                  <div class="ping green"></div>
  120.                  <div class="ping green"></div>
  121.              </div>
  122.          </div>
  123. </body>
  124. </html>

   5.圆形正方形切换小loading

　　这个是真的简单！！！！！

  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="renderer" content="webkit">
  6. <link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">
  7. <title>loading-04</title>
  8. </head>
  9. <body>
  10. <style>
  11.      body{
  12.          padding: 80px 100px;
  13.      }
  14.      .csshub-loading-icon{
  15.          padding:10px;
  16.          width:10px;
  17.          height:10px;
  18.          border-top:20px solid #ED5548;
  19.          border-right:20px solid #599CD3;
  20.          border-bottom: 20px solid #5CBD5E;
  21.          border-left:20px solid #FDD901;
  22.          background:transparent;
  23.          animation: csshub-rotate-right-round 1.2s ease-in-out infinite alternate ;
  24.      }
  25.      @keyframes csshub-rotate-right-round
  26.          {
  27.          0% { transform: rotate(0deg);}
  28.          50% {transform: rotate(180deg); }
  29.          100% {transform: rotate(360deg);border-radius:50%;}
  30.      }
  31. </style>
  32.      <div class="csshub-loading-icon"></div>
  33. </body>
  34. </html>

我没做兼容，要是再某些浏览器不能运行，加一下浏览器前缀就好啦！
 

以上所述是小编给大家介绍的CSS3实现的几个小loading效果 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

标签： loading

赏
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！

上一篇CSS3 background-image颜色渐变的实现代码

下一篇CSS中的四种引用方式

相关文章