DIV跷跷板特效,3D视差效果

这里写图片描述
这里写图片描述
这里写图片描述

css:
.avatar_author {
    background-color: rgba(236, 238, 239, 0) !important;
    box-shadow: 0 0 10px 1px #ccc;
    transition: all .3s linear;
    transform-origin: 50%;
}
html:
<div class="avatar_author jumbotron p-y-1">
    <img src="0.jpg" style="width: 100%" alt="">
    <p class="lead" style="font-size: 12px;color: rgba(123, 123, 123, 0.76);">本次他结合自身的资深阅历,及对行业技术领域的发展动向</p>
</div>
js:
<script>
    // DIV跷跷板效果;
    var el = document.querySelector('.avatar_author');
    el.addEventListener('mousemove', (e) => {
        // Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
      var this_px = el.getBoundingClientRect().left;
      var this_py = el.getBoundingClientRect().top;
      var box_width = el.getBoundingClientRect().width;
      var box_height = el.getBoundingClientRect().height;
      var scroll_top = document.documentElement.scrollTop + document.body.scrollTop;

      var mouseX = e.pageX - this_px;
      var mouseY = e.pageY - scroll_top - this_py;
      var X;
      var Y;

      X = mouseX - box_width / 2;
      Y = box_height / 2 - mouseY;

      el.style.transform = `perspective(2000px) rotateY(${X / 10}deg) rotateX(${Y / 10}deg)`;
      el.style.boxShadow = `${-X / 20}px ${Y / 20}px 50px rgba(0, 0, 0, 0.5)`;
    })


    el.addEventListener('mouseleave', () => {
      el.style.transform = `perspective(2000px) rotateY(0deg) rotateX(0deg)`;
      el.style.boxShadow = '';
    })
</script>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页