Question

在使用zoom属性时，我会尝试将所有紫色和文本内部悬停在更大的位置。

赞：

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

两个问题：

持续时间不受影响（尝试将其置于悬停类而不是悬停类中，但仍然可以）。
当我的鼠标位于紫色顶部时，就像一个放大和缩小的循环：

以下是相关代码，感谢您的帮助！

**我希望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一起定义。

此外，您还必须用transform: scale()替换zoom。

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>

Answer 2

添加这样的过渡属性：

transition: transform 0.2s;

1）到元素的初始状态 2）移至元素的悬停状态

使用两种方法均可正确设置元素的动画

initial state -> hover state 

hover state -> initial state

过渡持续时间不适用于特定div

2 个答案: