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

Question

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

Answer 1

<style type="text/css">&nbsp; &nbsp; .content{&nbsp; &nbsp; &nbsp; &nbsp; margin:200px auto;&nbsp; &nbsp; &nbsp; &nbsp; width:200px;&nbsp; &nbsp; &nbsp; &nbsp; height:200px;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; background: #db473c;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; color:#fff;&nbsp; &nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; .container {&nbsp; &nbsp; &nbsp; &nbsp; transform-style: preserve-3d;&nbsp; &nbsp; &nbsp; &nbsp; perspective: 500px;&nbsp; &nbsp; }&nbsp; &nbsp; </style>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; <div class="content"></div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; (function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var content=document.querySelector(".content")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content.onmousemove=function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var evt=e||window.event;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var rotateY=-(content.clientWidth/2-evt.offsetX)/10;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var rotateX=(content.clientHeight/2-evt.offsetY)/10;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content.style.transform=`rotateX(${rotateX}deg) rotateY(${rotateY}deg)`&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; )()&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </script>

Answer 2

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