Question

这是问题所在：块本身向上增加，并且其中的文本随它一起存在，但是我需要文本始终保留在一个位置。请帮帮我如何在不断增长的块内修复文本似乎没有错误定位，但仍然无法正常工作

.section01 {
  position: absolute;
  width: 223px;
  height: 181px;
  background-color: #ffffff;
  bottom: 0px;
  background-color: #ccc;
}

.section01:hover {
  animation: width-up 5s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  background-color: #000;
  color: #fff;
}

@keyframes width-up {
  from {
    width: 223px;
    height: 181px
  }
  to {
    width: 223px;
    height: 340px
  }
}

.numb {
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1.17px;
  line-height: 25.31px;
  padding-top: 25px;
  padding-left: 30px;
}

.numbdescr {
  padding-top: 40px;
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 600;
  line-height: 25.31px;
  padding-left: 30px;
}

<div class="section01">
  <div class="numb">
    01
  </div>
  <!-- /.numb -->
  <div class="numbdescr">
    Юридические услуги
  </div>
  <!-- /.numbdescr -->
</div>
<!-- /.section -->

Answer 1

动画import yaml d = yaml.load(response.text)而不是padding-top：

height

.section01 {
  position: absolute;
  bottom: 0px;
  width: 223px;
  height: 181px;
  background-color: #ffffff;
  background-color: #ccc;
}

.section01:hover {
  animation: padding-up 5s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  background-color: #000;
  color: #fff;
}

@keyframes padding-up {
  from {
    padding-top: 0;
  }
  to {
    padding-top: 159px;
  }
}

.numb {
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1.17px;
  line-height: 25.31px;
  padding-top: 25px;
  padding-left: 30px;
}

.numbdescr {
  padding-top: 40px;
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 600;
  line-height: 25.31px;
  padding-left: 30px;
}

Answer 2

由于您没有添加HTML代码，因此很难识别该问题。无论如何，我都会尝试提供一些建议。也许您可以做这样的事情：

{{1}}

如果您对CSS中的定位概念有疑问，请观看this one之类的教程。

如何在不断增长的块内修复文本

2 个答案: