Question

我正在使用transform：scale（）;在网站上。我希望有人能帮助我解决一个我无法通过网络搜索解决的问题。

这是我的代码： HTML：

<div class="hopp_circle_img">
   <img src="..." alt="" />
</div>

CSS：

.hopp_circle_img {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 0;
}
.hopp_circle_img img {
  -webkit-transition: transform 0.15s;
  transition: transform 0.15s;
}
.hopp_circle_img img:hover {
  display: block; 
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

这样做很好，但是当courser进入时，我被要求使效果不同，而不是当它移出时。例如。在鼠标输入时快速缩放，但在鼠标输出时速度慢。在CSS3或Javascript中是否有任何解决方案？

谢谢 rabox

Answer 1

设置到元素的慢转换（.hopp_circle_img img），以及在元素悬停时的快速转换（.hopp_circle_img img:hover）。因此，当您离开元素时，较慢的过渡将生效。

我已将transition shorthand property设置为具有不同的持续时间和缓和，但您只需更改transition-duration或设置transition-delay或其他transition-timing-function (easing)。

.hopp_circle_img {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 0;
}
.hopp_circle_img img {
  -webkit-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}
.hopp_circle_img img:hover {
  display: block;
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: transform 0.15s;
  transition: transform 0.15s;
}

<div class="hopp_circle_img">
  <img src="https://65.media.tumblr.com/avatar_39c12973e9fe_128.png" alt="" />
</div>

Answer 2

抱歉，发布后我直接解决了这个话题。必须有不同的过渡时间：悬停。 e.g。

.hopp_circle_img img {
  -webkit-transition: transform 0.15s;
  transition: transform 0.15s;
}
.hopp_circle_img img:hover {
  display: block; 
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: transform 2s;
  transition: transform 2s;

}

变换：scale（n）; - 在mousein上比在mouseout上有所不同

2 个答案: