CSS 中的两个卷帘动画

Question

我想做打开两个（顶部和底部）的动画'shutters'，我想在其后面显示一些数据（例如数字）。

我正在使用 z-index，因为我希望窗帘（打开百叶窗）后面的数字在窗帘打开之前就在那里。

动画需要上条纹收缩到上边缘，下条纹收缩到下边缘。收缩应该是可见的，因为使每个条带的高度降低 - 所以从 13px 的原始高度到 0px。同时upper的stripe CSS top属性应该是+=1px，lower的stripe top应该是-=1px，来模拟他们正在打开。

目前我在将每个条纹 height 从原始值变为 0px 时遇到问题（其中只有一个是 'opening'）。而且我不知道如何同时更改它们的 top 属性。

在动画中间时，应该如下所示：

CSS 和 HTML

#wrapper {
  width: 100px;
  height: 30px;
  border: 2px solid black;
  position: relative;
  top: 50px;
  z-index: 2;
}
.stripe {
  position: relative;
  width: 98px;
  height: 13px;
  background: green;
  z-index: 1;
  border: 1px solid red;
  transition: height 500ms ease-in-out;
}
.stripe:hover {
  height: 0;
}
#money {
  position: relative;
  top: -25px;
  width: 90%;
  display: block;
  margin: 0 auto;
  z-index: 0;
  text-align: center;
}

<div id="wrapper">
  <div class="stripe"></div>
  <div class="stripe"></div>
  <input type="text" id="money" value="1200">
</div>

Answer 1

你真的应该使用 position:absolute 作为这个和相对宽度和高度（百分比值）。加入了一些技巧，我认为这更接近您想要实现的目标。

#wrapper {
  width: 100px;
  height: 30px;
  border: 2px solid black;
  position: relative;
  top: 50px;
  z-index: 2;
}
.stripe {
  position: absolute;
  width: 100%;
  height: 50%;
  background: green;
  z-index: 1;
  transition: height 500ms ease-in-out;
}
.stripe:first-child {
  border-bottom: 1px solid transparent;
  top: 0;
}
.stripe + .stripe {
  border-top: 1px solid transparent;
  bottom: 0;
}

#wrapper:hover .stripe {
  height: 0;
}
#money {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 90%;
  display: block;
  margin: auto;
  z-index: 0;
  text-align: center;
  height: 1.2em;
  line-height: 1.2em;
}

<div id="wrapper">
  <div class="stripe"></div>
  <div class="stripe"></div>
  <input type="text" id="money" value="1200">
</div>

为了通过一些技巧来阐明我的意思，我在顶部百叶窗和底部百叶窗的底部和顶部（分别）使用了透明的 1px 边框；我在输入框上使用了设置的宽度和高度 margin: auto 来垂直和水平居中；我使用 <selector> + <selector> 选择器（相邻的同级选择器）来区分这两个条纹（这完全符合 CSS2.1 并且可以在很早以前用于浏览器兼容性）。

编辑：

根据要求，要将此解决方案转换为 javascript 解决方案，只需将所有出现的 :hover（在这种情况下只有一个）替换为 class（例如 .hover-state);并使用您最喜欢的 goto 事件侦听器格式切换 class。在这种情况下不需要超过一个 class。

var wrapper = document.getElementById('wrapper');

wrapper.addEventListener('mouseenter', function(){
  this.classList.toggle('hover-state');
});

#wrapper {
  width: 100px;
  height: 30px;
  border: 2px solid black;
  position: relative;
  top: 50px;
  z-index: 2;
  cursor: text;
  display: block;
}
.stripe {
  position: absolute;
  width: 100%;
  height: 50%;
  background: green;
  z-index: 1;
  transition: height 500ms ease-in-out;
}
.stripe:first-of-type {
  border-bottom: 1px solid transparent;
  top: 0;
}
.stripe + .stripe {
  border-top: 1px solid transparent;
  bottom: 0;
}

#wrapper.hover-state .stripe, input:focus ~ .stripe {
  height: 0;
}
#money {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 90%;
  display: block;
  margin: auto;
  z-index: 0;
  text-align: center;
  height: 1.2em;
  line-height: 1.2em;
  outline: none!important;
  border: none;
  background: transparent;
}

<label id="wrapper">
  <input type="text" id="money" value="1200">
  <div class="stripe"></div>
  <div class="stripe"></div>
</label>

CSS 中的两个卷帘动画

Two rolling shutters animation in CSS

css

animation

shutter

编辑：