html – 用css动画交易场所

2019年7月20日 155次阅读

我正在研究缩放css悬停,我不能指甲.我认为这可以通过变换scale()来完成,但是由于焦点很容易在悬停时丢失,所以我有很大的闪烁.更不用说,我想要达到的效果只是对一张图像的效果不佳.那么让我解释一下我正在做什么.

我有2部电话相互重叠.理想情况下,背景中的那个应该小约10％以实现深度感知的效果.当我将鼠标悬停在背景中的一个上时,它应该到达前面并交易z-index位置,缩放至100％,并使另一个减少10％(再次为百分比效果).

当我将鼠标悬停在我发回的那个上面时会发生同样的效果,它应该回到前面的前面,依此类推.

我会接受Javascript,但我宁愿使用纯CSS解决方案,除非jQuery / JS是一个有效的工作.

这是HTML

<div class="wrap">
  <img class="elem" src="http://www.lotusmarketingsolutions.com/wp-content/uploads/2016/01/monsters-4.png" alt="" />
  <img class="elem2" src="http://www.lotusmarketingsolutions.com/wp-content/uploads/2016/01/monsters-3.png" alt="" />
</div>

和CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300);
body {
  background: #202020;
  font-family: 'Roboto', sans-serif;
}

.wrap {
  width: 50%;
  margin: 0 auto;
  position: relative;
}

.wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
}

.elem {
  margin-left: 130px;
  margin-top: 20px;
}

.elem:hover {
  zoom: 50%;
  -ms-transform: scale(2, 3);
  /* IE 9 */
  -webkit-transform: scale(2, 3);
  /* Safari */
  transform: scale(2, 3);
}

.elem2:hover {
  zoom: 150%;
  -ms-transform: scale(1.1, 1.1);
  /* IE 9 */
  -webkit-transform: scale(1.1, 1.1);
  /* Safari */
  transform: scale(1.1, 1.1);
}

和CODEPEN

谢谢！

最佳答案 第一：

纯CSS
JS Fiddle 1 – updated 2,我为了简单起见删除了前缀CSS

    @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300);
    body {
      background: #202020;
      font-family: 'Roboto', sans-serif;
    }
    .wrap {
      width: 50%;
      margin: 0 auto;
      position: relative;
      z-index: 100;
    }
    .wrap img {
      position: absolute;
      top: 0;
      left: 0;
      width: 250px;
    }
    .elem {
      margin-left: 130px;
      margin-top: 20px;
      z-index: 1000;
      transition: transform 0.3s;
    }
    .elem2 {
      z-index: 10000;
      transition: margin-left, transform 0.3s;
    }
    .elem:hover {
      zoom: 50%;
      margin-left: 500px;
      margin-top: 200px;
      transform: scale(3, 3);
      z-index: 100000;
      transition: transform 0.3s;
    }
    .elem2:hover {
      zoom: 150%;
      margin-left: -50px;
      transform: scale(1.1, 1.1);
      transition: margin-left, transform 0.3s;
    }
<div class="wrap">
  <img class="elem" src="http://www.lotusmarketingsolutions.com/wp-content/uploads/2016/01/monsters-4.png" alt="" />
  <img class="elem2" src="http://www.lotusmarketingsolutions.com/wp-content/uploads/2016/01/monsters-3.png" alt="" />
</div>

更新：

第二：使用jQuery .animate()和.css()函数 – 为.elem手机提供更流畅的动画,落后于更多浏览器支持

JS Fiddle 2

var elem = $('.elem'),
  elemW = elem.width(),
  elemH = elem.height(),
  elem2 = $('.elem2'),
  elem2W = elem2.width(),
  elem2H = elem2.height();

elem.hover(function() {
  $(this).css({'z-index': '100000'}).animate({
    width: 1.5 * elemW,
    height: 1.5 * elemH,
    marginTop: '-10',
    marginLeft: '80'
  }, 300);
}, function() {
  $(this).css({'z-index': '1000'}).animate({
    width: elemW,
    height: elemH,
    marginTop: '20',
    marginLeft: '130'
  });
});

elem2.hover(function() {
  $(this).animate({
    width: 1.5 * elem2W,
    height: 1.5 * elem2H,
    marginLeft: '-50'
  }, 300);
}, function() {
  $(this).animate({
    width: elem2W,
    height: elem2H,
    marginLeft: '0'
  });
});
点赞