如何制作动画片盒？

Question

如何创建类似以下网址的效果： https://www.tinkapp.com/en/

将鼠标移到＆＃34;框＆＃34;后，三条线的动画如下：

将鼠标移到盒子外面后，线条会再次回到原点。我该如何复制这种效果？

Answer 1

用于创建tranform属性所需的过渡效果的CSS方法。

使用:nth-child定位第1行和第3行，并应用translateY属性值。 transition属性可以像您提到的页面一样为您提供轻松的效果。

修改：为旧浏览器支持添加了保证金属性

.box {
  width: 50px;
  height: 50px;
  background: #4AC6B7;
  padding-top: 15px;
}
.line {
  width: 20px;
  height: 5px;
  background: white;
  margin-top: 5px;
  margin-left: 30%;
}
.box:hover > .line:nth-child(1) {
  transform: translateY(-5px);
  /* margin-top: -5px; For transform fallback */
  transition: all ease 0.2s;
}
.box:hover > .line:nth-child(2) {
  /* margin-top: 15px; When not using transform */
  transition: all ease 0.2s;
}
.box:hover > .line:nth-child(3) {
  transform: translateY(5px);
  /* margin-top: 15px; For transform fallback */
  transition: all ease 0.2s;
}

<div class="box">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>