如何制作动画盒子？

Question

如何创建如下效果 URL： https://www.tinkapp.com/en/

将鼠标悬停在 "box" 上后，三行动画如下：

将鼠标移到框外后，线条又回到了一起。我怎样才能复制这种效果？

Answer 1

CSS 创建 tranform 属性.

所需的过渡效果的方法

将第 1 行和第 3 行设为 :nth-child 并应用 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>

Answer 2

在我看来，更优雅、更灵活的解决方案是使用 Flexbox。然后，您可以简单地更改悬停时水平线的边距。向非悬停规则添加 transition 属性以使其具有良好的动画效果。

标记：

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

相关 CSS:

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.line {
  transition: margin 0.3s;
  margin: 2px 0;
}

.hamburger:hover .line {
  margin: 4px 0;
}

Full CSS&HTML with style on CodePen

比起之前发布的 transform 解决方案，我更喜欢这个解决方案，因为这个解决方案不需要重复代码，而且我发现它更具声明性。您希望线条分开，而不是第一条线向上，第三条线向下。

至于浏览器支持，两者相似 - 请参阅 2D transforms vs Flexboxes on Can I Use。

.hamburger {
  width: 50px;
  height: 50px;
  background: lightBlue;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 10px;
  justify-content: center;
  cursor: pointer;
}
.line {
  width: 100%;
  height: 4px;
  background: white;
  transition: margin 0.3s ease;
  margin: 2px 0;
}
.hamburger:hover .line {
  margin: 4px 0;
}

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

如何制作动画盒子？

How to make animated box?

html

css

css-animations