html - 过渡持续时间在特定的 div 中不起作用

Question

我尝试使用缩放属性将每个紫色和文本从内到外悬停。

像这样:

https://i.imagesup.co/images2/9fadd677f1625d887fdbd4819af96ee4acb6fe89.png

两个问题:

1. 持续时间不影响(尝试将其置于悬停类而不是悬停类，但仍然如此)。

2. 当我的鼠标在紫色的顶部时，它就像一个放大和缩小的循环:

这是相关代码，感谢帮助!

** 我希望 duration 属性在我离开鼠标时处于第一类，以获得相同的效果。

body {
  margin: 0 auto;
  overflow-x: hidden;
}

#divStyle1 {
  height: 90vh;
  background-color: #016087;
}

#purpuleLineBox {
  position: absolute;
  top: 25%;
}

#purpuleLine1 {
  background-color: #D52C82;
  height: 7vh;
  width: 30vw;
  margin-bottom: 30px;
}

#purpuleLine2 {
  background-color: #D52C82;
  height: 7vh;
  width: 38vw;
  margin-bottom: 30px;
}

#purpuleLine3 {
  background-color: #D52C82;
  height: 7vh;
  width: 42vw;
  margin-bottom: 30px;
}

#purpuleLine4 {
  background-color: #D52C82;
  height: 7vh;
  width: 50.5vw;
  margin-bottom: 30px;
}

#purpuleLine5 {
  background-color: #D52C82;
  height: 7vh;
  width: 52.5vw;
  margin-bottom: 30px;
}

div>p {
  color: white;
  text-shadow: 2px 2px black;
  font-weight: bold;
  font-size: 2vw;
  margin-left: 7px;
  position: relative;
  top: 5%;
}

.purpuleHover {
  zoom: 100%;
  transition-duration: 0.5s;
}

.purpuleHover:hover {
  zoom: 120%;
}

<div id="divStyle2">
  <main>
    <div id="purpuleLineBox">
      <div id="purpuleLine1" class="purpuleHover">
        <p>100% recyclable and bio-degradable</p>
      </div>
      <div id="purpuleLine2" class="purpuleHover">
        <p>Simulates the natural ripening process, organic</p>
      </div>
      <div id="purpuleLine3" class="purpuleHover">
        <p>The quickest way to achieve the perfect avocado taste</p>
      </div>
      <div id="purpuleLine4" class="purpuleHover">
        <p>Work with Mango, Banana, Peach, and another climacteric fruits</p>
      </div>
      <div id="purpuleLine5" class="purpuleHover">
        <p>The user interface on the bag shows when an avocado is fully ripen</p>
      </div>
    </div>
  </main>
</div>

Answer 1

您需要添加一个 transition-property ，它定义了转换应该处理的 css 属性，而不仅仅是 transition-duration .您可以使用单独的减速来执行此操作，或者将它们与速记一起定义 transition .

此外，您必须将 zoom 替换为 transform: scale() .

body {
  margin: 0 auto;
  overflow-x: hidden;
}

#divStyle1 {
  height: 90vh;
  background-color: #016087;
}

#purpuleLineBox {
  position: absolute;
  top: 25%;
}

#purpuleLine1 {
  background-color: #D52C82;
  height: 7vh;
  width: 30vw;
  margin-bottom: 30px;
}

#purpuleLine2 {
  background-color: #D52C82;
  height: 7vh;
  width: 38vw;
  margin-bottom: 30px;
}

#purpuleLine3 {
  background-color: #D52C82;
  height: 7vh;
  width: 42vw;
  margin-bottom: 30px;
}

#purpuleLine4 {
  background-color: #D52C82;
  height: 7vh;
  width: 50.5vw;
  margin-bottom: 30px;
}

#purpuleLine5 {
  background-color: #D52C82;
  height: 7vh;
  width: 52.5vw;
  margin-bottom: 30px;
}

div>p {
  color: white;
  text-shadow: 2px 2px black;
  font-weight: bold;
  font-size: 2vw;
  margin-left: 7px;
  position: relative;
  top: 5%;
}

.purpuleHover {
  position: relative;
  transform: scale(1);
  transition: transform 0.5s;
  transform-origin: top left;
}

.purpuleHover:hover {
  transform: scale(2);
  z-index: 1;
}

<div id="divStyle2">
  <main>
    <div id="purpuleLineBox">
      <div id="purpuleLine1" class="purpuleHover">
        <p>100% recyclable and bio-degradable</p>
      </div>
      <div id="purpuleLine2" class="purpuleHover">
        <p>Simulates the natural ripening process, organic</p>
      </div>
      <div id="purpuleLine3" class="purpuleHover">
        <p>The quickest way to achieve the perfect avocado taste</p>
      </div>
      <div id="purpuleLine4" class="purpuleHover">
        <p>Work with Mango, Banana, Peach, and another climacteric fruits</p>
      </div>
      <div id="purpuleLine5" class="purpuleHover">
        <p>The user interface on the bag shows when an avocado is fully ripen</p>
      </div>
    </div>
  </main>
</div>