鍍金池/ 問答/HTML5  HTML/ 錘子科技官網(wǎng)banner的動(dòng)效是如何實(shí)現(xiàn)的？

錘子科技官網(wǎng)banner的動(dòng)效是如何實(shí)現(xiàn)的？

錘子科技官網(wǎng)banner的動(dòng)效是如何實(shí)現(xiàn)的呢？就是圖片隨鼠標(biāo)的軌跡移動(dòng)的動(dòng)效。以及上方圖片文字動(dòng)效。是CSS3嗎？
地址：https://www.smartisan.com/

回答
編輯回答
凝雅

clipboard.png
js 判斷鼠標(biāo)位置，修改css

2018年7月19日 04:22
編輯回答
青黛色

從效果來看，鼠標(biāo)移動(dòng)到不同位置，反饋的動(dòng)畫不一樣，可以很明確的看出，這個(gè)效果是js+css3實(shí)現(xiàn)的。
js判斷鼠標(biāo)位置，css3做效果

2017年2月22日 23:44
編輯回答
款爺

根據(jù)css3中的旋轉(zhuǎn)就可以實(shí)現(xiàn)的http://www.w3school.com.cn/cs...

2018年2月28日 12:22
編輯回答
深記你
<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>
2017年6月18日 15:53