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>

秒客网

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

相关文章