html - 使用 CSS 旋转 div

标签 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>

What changes should I make so that I can get expected result, i.e see GIF file

我想要我的动画像这样 GIF File .

最佳答案

我会用更少的代码以不同的方式完成此操作，并且更容易调整和控制:

.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

关于html - 使用 CSS 旋转 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56506082/

上一篇：html - 在VBA中使用XMLHTTP对象解析一些网站

下一篇：html - 表格中子行的滑动动画

相关文章：

javascript - 定位元素失败

javascript - 在 <a> 上应用数据过滤器

html - CSS Foundation 使左 div 在小屏幕上低于右 div

html - 淡入输入文本框

jquery - 通过 jQuery 访问 CSS 变量

javascript - ul 扩展器列表未按预期运行

html - 优先考虑两个绝对元素

html - 悬停时将 SVG 从颜色更改为带有过渡的渐变

jquery - 悬停和正常状态之间的平滑过渡(使用 css3 动画)

css - rotateY 过渡的原点错位

©2024 IT工具网  联系我们