Question

我正在制作一个看起来像水平声音可视化工具的简单CSS动画。因为我一直在研究前三个水平条，我注意到当动画div的高度时，只有底部受到影响。

扭转这种动画效果会有什么作用？

CSS：

body{
  background-color: #283739;
}
.container {
  width: 200px;
  margin: 10em auto;
}
@keyframes line {
  50% {height: 120px}
}
@keyframes line2 {
  50% {height: 122px}
}
@keyframes line3 {
  50% {height: 123px}
}
.box1{
  width: 20px;
  height: 100px;
  background-color: #F5F5F5;
  float: left;
  margin: 5px;
  box-shadow: 5px 5px 2px #001F39;
  animation: line 0.7s linear 0s infinite;
}
.box2{
  width: 20px;
  height: 100px;
  background-color: #A9C52F;
  float: left;
  margin: 5px;
  box-shadow: 5px 5px 2px #001F39;
  animation: line2 0.5s linear 0s infinite;
}
.box3{
  width: 20px;
  height: 100px;
  background-color: #F5F5F5;
  float: left;
  margin: 5px;
  box-shadow: 5px 5px 2px #001F39;
  animation: line3 0.8s linear 0s infinite;
}

以下是codepen.io链接。

Answer 1

高度动画：（您的原始代码）

在您提供的代码中，您正在为元素的height设置动画。默认情况下，当高度设置动画时，由于文档的流动方式，元素将从上到下增长。

为了达到相反的效果，您必须将div[class^="box"]（所有div元素，其类以box}元素的元素放在父元素的绝对位置。完成后，所有高度变化都将从下往上增长，因此你最终会得到相反的效果。

以下是我添加的属性的摘录（仅限我添加的属性，请参阅完整演示的代码段）：

.container {
  position: relative;
}
div[class^="box"] {
  position: absolute;
  bottom: 0px;
  margin: 5px;
}
.box1 {
  left: 0px;
}
.box2 {
  left: 20px;
}
.box3 {
  left: 40px;
}

body {
  background-color: #283739;
}
.container {
  position: relative;
  width: 200px;
  margin: 10em auto;
}
@keyframes line {
  50% {
    height: 120px
  }
}
@keyframes line2 {
  50% {
    height: 122px
  }
}
@keyframes line3 {
  50% {
    height: 123px
  }
}
div[class^="box"] {
  position: absolute;
  bottom: 0px;
  width: 20px;
  height: 100px;
  margin: 5px;
}
.box1 {
  left: 0px;
  background-color: #F5F5F5;
  box-shadow: 5px 5px 2px #001F39;
  animation: line 0.7s linear 0s infinite;
}
.box2 {
  left: 20px;
  background-color: #A9C52F;
  box-shadow: 5px 5px 2px #001F39;
  animation: line2 0.5s linear 0s infinite;
}
.box3 {
  left: 40px;
  background-color: #F5F5F5;
  box-shadow: 5px 5px 2px #001F39;
  animation: line3 0.8s linear 0s infinite;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

ScaleY变换动画：（替代，性能较低的方法）

产生这种效果的另一种方法是使用CSS scaleY变换。这里不需要使用position，我们可以将transform-origin设置为bottom，以指示scaleY（即缩放高度）应该在底点固定的情况下发生。

@keyframes line {
  50% {
    transform: scaleY(1.2);
  }
}
@keyframes line2 {
  50% {
    transform: scaleY(1.22);
  }
}
@keyframes line3 {
  50% {
    transform: scaleY(1.23);
  }
}
div[class^="box"] {
  float: left;
  transform-origin: bottom;
}

body {
  background-color: #283739;
}
.container {
  width: 200px;
  margin: 10em auto;
}
@keyframes line {
  50% {
    transform: scaleY(1.2);
  }
}
@keyframes line2 {
  50% {
    transform: scaleY(1.22);
  }
}
@keyframes line3 {
  50% {
    transform: scaleY(1.23);
  }
}
div[class^="box"] {
  float: left;
  transform-origin: bottom;
  width: 20px;
  height: 100px;
}
.box1 {
  background-color: #F5F5F5;
  box-shadow: 5px 5px 2px #001F39;
  animation: line 0.7s linear 0s infinite;
}
.box2 {
  background-color: #A9C52F;
  box-shadow: 5px 5px 2px #001F39;
  animation: line2 0.5s linear 0s infinite;
}
.box3 {
  background-color: #F5F5F5;
  box-shadow: 5px 5px 2px #001F39;
  animation: line3 0.8s linear 0s infinite;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

Div高度的关键帧动画影响底部

1 个答案: