代码之家 › 专栏 › 技术社区 › bhansa

制作线动画加载程序

animation css html

bhansa · 技术社区 · 6 年前

我正在创建一个加载程序动画,我已经实现了如下所示:

我希望黑线从,左-右,然后右-左无限移动。现在,它只朝一个方向移动。

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  position: relative;
}
.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1s infinite;
}
@keyframes line-bounce {
  from {
    left: 300px;
  }
  to {
    left: 0;
  }
}

<div class="loader">
  <div class="blue-line"></div>
</div>

7 回复 | 直到 6 年前

××× × ×××× 6 年前

使用 @keyframes 具有 % 0/50/100 支持使用 100%{left: 300px;}

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  position: relative;
}
.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1s infinite;
}
@keyframes line-bounce {
  0%{
    left: 300px;
  }
  50%{
    left: 0;
  }
100%{
 left: 300px;
}
}

<div class="loader">
  <div class="blue-line"></div>
</div>

doğukan 6 年前

或者,您只能使用

 50% {
    left: 300px;
 }

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  position: relative;
}

.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1.6s infinite;
}

@keyframes line-bounce {
  
  50% {
    left: 300px;
  }
  
}

<div class="loader">
  <div class="blue-line"></div>
</div>

Xenio Gracias 6 年前

希望这能帮助你,谢谢。如果您想了解关于关键帧的更多信息,请访问下面的链接。谢谢

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  position: relative;
}
.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1s infinite;
}
@keyframes line-bounce {
    0%   {left: 0px;}
    50%  {left: 300px;}
    100% {left: 0px;}
 
}

<div class="loader">
  <div class="blue-line"></div>
</div>

Temani Afif 6 年前

更简单的方法是简单地添加 alternate 对动画进行如下调整以避免使用像素值:

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  margin:10px 0;
  position: relative;
}
.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1s infinite alternate;
}
@keyframes line-bounce {
  from {
    left: 100%;
    transform:translateX(-100%);
  }
  to {
    left: 0;
    transform:translateX(0);
  }
}

<div class="loader">
  <div class="blue-line"></div>
</div>
<div class="loader" style="width:500px">
  <div class="blue-line"></div>
</div>

<div class="loader" style="width:200px">
  <div class="blue-line"></div>
</div>

bhansa 6 年前

谢谢你,我只是做了一些改变使它看起来更平滑。

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  position: relative;
}

.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1.6s infinite;
}

@keyframes line-bounce {
  0% {
    left: 300px;
  }
  50% {
    left: 0;
  }
  100% {
    left: 300px;
  }
}

<div class="loader">
  <div class="blue-line"></div>
</div>

Abhineet 6 年前

试试看: fiddle

HTML:

<div class="loader_trak">
  <div class="loader_bar">

  </div>
</div>

CSS:

.loader_trak {
      position: relative;
      height: 10px;
      background-color: #ccc;
      width: 250px;
    }

    .loader_bar {
      background-color: #333;
      position: absolute;
      height: 100%;
      width: 80px;
      animation: line-bounce 1s infinite;
    }
    @keyframes line-bounce {
      0% {
        left: 0;
      }
      50% {
        left: calc(100% - 80px);
      }
      100%{
        left: 0;
      }
    }

bhansa 6 年前

您可以使用以下代码

<html>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <style type="text/css">
    .loader {
      background: #ccc;
      width: 400px;
      height: 10px;
      border-radius: 10px;
      position: relative;
    }
    
    .loader .blue-line {
      background: #000;
      border-radius: 10px;
      position: absolute;
      left: 0;
      z-index: 1;
      width: 100px;
      height: 10px;
      animation: line-bounce 1s infinite;
    }
    
    @keyframes line-bounce {
      0% {
        left: 0px;
      }
      50% {
        left: 300px;
      }
      100% {
        left: 0px;
      }
    }
  </style>
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="loader">
        <div class="blue-line"></div>
      </div>
    </div>
  </div>

</body>

</html>