以前看到錘子科技官網(wǎng)的banner效果挺好玩的，一直沒有研究；今天看到饑人谷，使用jquery給出了一種實現(xiàn)方式；我自己用原生js也實現(xiàn)了一遍。大致原理相同，但算法不同。

我的方法原理，如圖所示，假設(shè)圖中的小圓點是中心點；e的位置為事件發(fā)生的位置。在水平方向上，deltaX/centerX就是元素要旋轉(zhuǎn)的度數(shù)代碼在最下方。

//html

banner

//css

.banner-wrap{

height: 900px;

outline: 1px dash #eee;

padding: 200px 0;

perspective: 1000px;

}

.banner{

width: 500px;

margin: 0 auto;

line-height: 500px;

box-sizing: border-box;

background-color: #37D7B2;

text-align: center;

line-height: 500px;

font-size: 50px;

color: #fff;

}

;(function(){

var bannerWrap = document.querySelector('.banner-wrap'),

banner = bannerWrap.querySelector('.banner');

banner.addEventListener('mousemove', function(e){

var centerX = banner.offsetLeft + banner.offsetWidth / 2,

centerY = banner.offsetTop + banner.offsetHeight / 2;

var deltaX = e.pageX - centerX,

deltaY = e.pageY - centerY;

var percentageX = deltaX / centerX,

percentageY = deltaY / centerY;

var deg = 10;

this.style.transform = 'rotateX(' + percentageY * -deg + 'deg)'

+ 'rotateY(' + percentageX * deg + 'deg)';

});

banner.addEventListener('mouseleave', function(e){

this.style.transform = '';

})

})();

總結(jié)

以上是生活随笔為你收集整理的android banner阴影,仿照锤子科技官网的banner 3d效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。