时间戳

首页 > 解决方案 > 如何使用绝对位置平滑拉伸 div？

html - 如何使用绝对位置平滑拉伸 div？

问题描述

我不能平滑地将左上 div 拉伸到 100vh 高度和 100vw 宽度。Box .btn 如我所愿顺利进行，但整个背景（div .red）有某种滞后，最后才顺利进行。请问有什么建议吗？:)

@keyframes stretchIn {
  0% {
    height: 50vh;
    width: 50vw;
    z-index: 0;
  }
  100% {
    height: 100vh;
    width: 100vw;
    z-index: 1;
  }
}

body {
  background: #999;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body .red,
body .blue,
body .green,
body .yellow {
  position: absolute;
  z-index: 0;
  height: 50vh;
  width: 50vw;
}

body .red {
  top: 0;
  left: 0;
  background: #a04951;
  transition: 1s;
}

body .red:hover {
  animation: stretchIn 5s both;
}

body .red .btn {
  position: relative;
  width: 50px;
  height: 50px;
  background: #fff;
  top: 45%;
  left: 45%;
}

body .blue {
  background: #c06c84;
  top: 0;
  right: 0;
}

body .green {
  bottom: 0;
  left: 0;
  background: #6c5b7b;
}

body .yellow {
  bottom: 0;
  right: 0;
  background: #355c7d;
}
<div class="red">
  <div class="btn"></div>
</div>
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>

密码笔

标签： htmlcsssass

解决方案

我从z-index悬停开始，而不是从动画开始。

@keyframes stretchIn {
  to {
    height: 100vh;
    width: 100vw;
  }
}

body {
  background: #999;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.red,
.blue,
.green,
.yellow {
  position: absolute;
  z-index: 0;
  height: 50vh;
  width: 50vw;
}

.red {
  top: 0;
  left: 0;
  background: #a04951;
}

.red:hover {
  animation: stretchIn 5s both;
  z-index: 1;
}

.red .btn {
  position: relative;
  width: 50px;
  height: 50px;
  background: #fff;
  top: 45%;
  left: 45%;
}

.blue {
  background: #c06c84;
  top: 0;
  right: 0;
}

.green {
  bottom: 0;
  left: 0;
  background: #6c5b7b;
}

.yellow {
  bottom: 0;
  right: 0;
  background: #355c7d;
}
<div class="red">
  <div class="btn"></div>
</div>
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>

推荐阅读