使用CSS旋转div

时间：2019-06-08 11:49:19

标签： html css css-animations

在CSS中创建的动画：

See GIF file 

body {
  overflow: hidden;
}

#pre_preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F8F8FF;
  z-index: 99;
}

#pre_status {
  width: 75px;
  height: 100px;
  position: relative;
  left: 50%;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
}

.loader__bar {
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 50%;
  background: #fff;
  transform-origin: center bottom;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
}

.loader__bar:nth-child(1) {
  background: white;
  left: 0px;
  -webkit-animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.loader__bar:nth-child(2) {
  background: black;
  left: 15px;
  -webkit-animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.loader__bar:nth-child(3) {
  background: gray;
  left: 30px;
  -webkit-animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.loader__bar:nth-child(4) {
  background: black;
  left: 45px;
  -webkit-animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

.loader__bar:nth-child(5) {
  background: white;
  left: 60px;
  -webkit-animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  ;
}

@keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}
<div id="pre_preloader">
  <div id="pre_status">
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
  </div>
</div>

但是我需要将div旋转90度，like this GIF file。

为此，我尝试了：

body {
  overflow: hidden;
}

#pre_preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F8F8FF;
  z-index: 99;
}

#pre_status {
  width: 75px;
  height: 100px;
  position: relative;
  left: 50%;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
}

.loader__bar {
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 50%;
  background: #fff;
  transform-origin: center bottom;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
}

.loader__bar:nth-child(1) {
  background: white;
  left: 0px;
  -webkit-animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.loader__bar:nth-child(2) {
  background: black;
  left: 15px;
  -webkit-animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.loader__bar:nth-child(3) {
  background: gray;
  left: 30px;
  -webkit-animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.loader__bar:nth-child(4) {
  background: black;
  left: 45px;
  -webkit-animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

.loader__bar:nth-child(5) {
  background: white;
  left: 60px;
  -webkit-animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  ;
}

@keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}
<div id="pre_preloader">
  <div id="pre_status">
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
  </div>
</div>

  

我应该进行哪些更改才能获得预期的结果，即see GIF file

我想要这样的动画GIF File。

3 个答案:

答案 0 :(得分：1)

只需旋转#pre_status并将其平移，这样您的容器位置就不会改变。像这样：

body {
  overflow: hidden;
}

#pre_preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F8F8FF;
  z-index: 99;
}

#pre_status {
  width: 75px;
  height: 100px;
  position: relative;
  left: 50%;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  transform: rotate(90deg) translate(49px, -60px);
}

.loader__bar {
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 50%;
  background: #fff;
  transform-origin: center bottom;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
}

.loader__bar:nth-child(1) {
  background: white;
  left: 0px;
  -webkit-animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.loader__bar:nth-child(2) {
  background: black;
  left: 15px;
  -webkit-animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.loader__bar:nth-child(3) {
  background: gray;
  left: 30px;
  -webkit-animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.loader__bar:nth-child(4) {
  background: black;
  left: 45px;
  -webkit-animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

.loader__bar:nth-child(5) {
  background: white;
  left: 60px;
  -webkit-animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  ;
}

@keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}
<div id="pre_preloader">
  <div id="pre_status">
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
  </div>
</div>

答案 1 :(得分：1)

感谢Temani Afif的comment 

body {
  overflow: hidden;
}

#pre_preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F8F8FF;
  z-index: 99;
}

#pre_status {
  width: 75px;
  height: 100px;
  position: relative;
  left: 50%;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.loader__bar {
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 50%;
  background: #fff;
  transform-origin: center bottom;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
}

.loader__bar:nth-child(1) {
  background: white;
  left: 0px;
  -webkit-animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.loader__bar:nth-child(2) {
  background: black;
  left: 15px;
  -webkit-animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.loader__bar:nth-child(3) {
  background: gray;
  left: 30px;
  -webkit-animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.loader__bar:nth-child(4) {
  background: black;
  left: 45px;
  -webkit-animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

.loader__bar:nth-child(5) {
  background: white;
  left: 60px;
  -webkit-animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  ;
}

@keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}
<div id="pre_preloader">
  <div id="pre_status">
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
    <div class="loader__bar"></div>
  </div>
</div>

答案 2 :(得分：1)

我将用更少的代码来做不同的事情，并且它会更容易调整和控制：

.box { 
  width:150px;
  height:100px;
  
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(#000,#000),
    linear-gradient(grey,grey),
    linear-gradient(#000,#000),
    linear-gradient(#fff,#fff);
  background-size:
    80% 20%;
  background-position:
    50% 0,
    50% 25%,
    50% 50%,
    50% 75%,
    50% 100%;
  background-repeat:no-repeat; 
  filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .2));
  animation: loading 1s infinite;
  
  /*For centring, not relevant to the animation*/
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
}

/*Each frame we change one 80% to 100% to animate one bar*/
@keyframes loading{
   16.67% { /* 100%/6 */
      background-size:
        100% 20%, /*this*/
        80% 20%,
        80% 20%,
        80% 20%,
        80% 20%;
   }
   33.33% { /* 2*100%/6 */
      background-size:
        80% 20%,
        100% 20%,/*this*/
        80% 20%,
        80% 20%,
        80% 20%;
   }
   50% {  /* 3*100%/6 */
      background-size:
        80% 20%,
        80% 20%,
        100% 20%, /*this*/
        80% 20%,
        80% 20%;
   }
   66.67% { /* 4*100%/6 */
      background-size:
        80% 20%,
        80% 20%,
        80% 20%,
        100% 20%, /*this*/
        80% 20%;
   }
   83.33% { /* 5*100%/6 */
      background-size:
        80% 20%,
        80% 20%,
        80% 20%,
        80% 20%,
        100% 20%; /*this*/
   }
} 


body {
  background:pink;
}
<div class="box">

</div>

要获得垂直版本，只需旋转div：

.box { 
  width:150px;
  height:100px;
  
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(#000,#000),
    linear-gradient(grey,grey),
    linear-gradient(#000,#000),
    linear-gradient(#fff,#fff);
  background-size:
    80% 20%;
  background-position:
    50% 0,
    50% 25%,
    50% 50%,
    50% 75%,
    50% 100%;
  background-repeat:no-repeat; 
  filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .2));
  animation: loading 1s infinite;
  
  /*For centring, not relevant to the animation*/
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);
}

/*Each frame we change one 80% to 100% to animate one bar*/
@keyframes loading{
   16.67% { /* 100%/6 */
      background-size:
        100% 20%, /*this*/
        80% 20%,
        80% 20%,
        80% 20%,
        80% 20%;
   }
   33.33% { /* 2*100%/6 */
      background-size:
        80% 20%,
        100% 20%,/*this*/
        80% 20%,
        80% 20%,
        80% 20%;
   }
   50% {  /* 3*100%/6 */
      background-size:
        80% 20%,
        80% 20%,
        100% 20%, /*this*/
        80% 20%,
        80% 20%;
   }
   66.67% { /* 4*100%/6 */
      background-size:
        80% 20%,
        80% 20%,
        80% 20%,
        100% 20%, /*this*/
        80% 20%;
   }
   83.33% { /* 5*100%/6 */
      background-size:
        80% 20%,
        80% 20%,
        80% 20%,
        80% 20%,
        100% 20%; /*this*/
   }
} 


body {
  background:pink;
}
<div class="box">

</div>

您可以通过调整background-size的值和动画属性来控制动画。

.box { 
  width:150px;
  height:100px;
  
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(#000,#000),
    linear-gradient(grey,grey),
    linear-gradient(#000,#000),
    linear-gradient(#fff,#fff);
  background-size:
    80% 20%;
  background-position:
    50% 0,
    50% 25%,
    50% 50%,
    50% 75%,
    50% 100%;
  background-repeat:no-repeat; 
  filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .2));
  animation: loading 0.8s infinite;
  
  /*For centring, not relevant to the animation*/
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
}

@keyframes loading{
   12.5% {
      background-size:
        90% 20%,
        80% 20%,
        80% 20%,
        80% 20%,
        80% 20%;
   }
   25% {
      background-size:
        95% 20%,
        90% 20%,
        80% 20%,
        80% 20%,
        80% 20%;
   }
   37.5% { 
      background-size:
        100% 20%,
        95% 20%,
        90% 20%,
        80% 20%,
        80% 20%;
   }
   50% {
      background-size:
        95% 20%,
        100% 20%,
        95% 20%,
        90% 20%,
        80% 20%;
   }
   62.5% {
      background-size:
        90% 20%,
        95% 20%,
        100% 20%,
        95% 20%,
        90% 20%;
   }
   75% { 
      background-size:
        80% 20%,
        90% 20%,
        95% 20%,
        100% 20%,
        95% 20%;
   }
   87.5% {
      background-size:
        80% 20%,
        80% 20%,
        90% 20%,
        95% 20%,
        100% 20%;
   }
} 


body {
  background:pink;
}
<div class="box">

</div>

enter image description here

相关问题
最新问题