锤子科技官网banner的动效是如何实现的？

Question

锤子科技官网banner的动效是如何实现的呢？就是图片随鼠标的轨迹移动的动效。以及上方图片文字动效。是CSS3吗？地址：https://www.smartisan.com/

Answer 1

<style type="text/css">

    .content{

        margin:200px auto;

        width:200px;

        height:200px;  

        background: #db473c;  

        color:#fff;   

    }

    .container {

        transform-style: preserve-3d;

        perspective: 500px;

    }

    </style>

    <div class="container">

    <div class="content"></div>

    </div>

    <script type="text/javascript">

        (function(){

            var content=document.querySelector(".content")

                content.onmousemove=function(e){

                    var evt=e||window.event;

                    var rotateY=-(content.clientWidth/2-evt.offsetX)/10;

                    var rotateX=(content.clientHeight/2-evt.offsetY)/10;

                    content.style.transform=`rotateX(${rotateX}deg) rotateY(${rotateY}deg)`

                }

        }

        )()

        

    </script>

Answer 2

从效果来看，鼠标移动到不同位置，反馈的动画不一样，可以很明确的看出，这个效果是js+css3实现的。
js判断鼠标位置，css3做效果