仿鎚子商城首頁banner圖滑鼠跟隨及視覺差效果

標籤：定義   ast   rspec   並且   數值   no-repeat   圖片   top   sla   

我發現現在很多網站都使用了這種效果，比如說鎚子官網、elementui官網、秒味課堂等，不單單有滑鼠跟隨的效果，隨著滑鼠的移動還有視覺差的效果，看起來很高大上的技術，其實實現起來很簡單，主要利用css3的transform-style和persperctive屬性。

廢話不多說直接上代碼：

html：

<div class="perspective">        <div class="preserve3d">            <span class="preserve3d_img"></span>            <span class="preserve3d_text">以傲慢與偏執<br/>回敬傲慢與偏見</span>        </div></div>

css：

關鍵設定：

   1、為外層容器設定perspective屬性，這個屬性值可以自訂可以是數值、top/bottom等

2、把你想要設定為視覺差的元素設定為絕對位置，並且添加transform：tanslateZ（deg）屬性

    * {        font-family: "Microsoft YaHei";        transition: all .3s;        -webkit-transition: all .3s;        transition-timing-function: linear;        -webkit-transition-timing-function: linear;    }    .perspective {        perspective: 800px;    }    .preserve3d {        position: relative;        width: 600px;        height: 300px;        margin: 100px auto;        background: url("http://static.smartisanos.cn/index/img/store/home/banner-3d-item-1-box-1_61bdc2f4f9.png") center no-repeat;        background-size: 100% 100%;        border-radius: 10px;        transform-style: preserve-3d;    }    .preserve3d_img {        position: absolute;        width: 100%;        height: 100%;        bottom: 11px;        left: 0;        background: url("http://static.smartisanos.cn/index/img/store/home/banner-3d-item-1-box-3_8fa7866d59.png") center no-repeat;        background-size: 95% 100%;        -webkit-transform: translateZ(60px);    }    .preserve3d_text {        position: absolute;        top: 20%;        right: 10%;        font-size: 30px;        color: #fff;        text-align: right;        font-weight: lighter;        -webkit-transform: translateZ(40px);    }

js：

 $(‘.preserve3d‘).on(‘mouseenter‘, function() {          var thisPX = $(this).offset().left;          var thisPY = $(this).offset().top;          var boxWidth = $(this).outerWidth();          var boxHeight = $(this).outerHeight();          $(this).addClass("smart_3d");          })          .on(‘mousemove‘, function(event) {          var mouseX = event.pageX - thisPX;          var mouseY = event.pageY - thisPY;          var X = mouseX - boxWidth/2;          var Y = boxHeight/2 - mouseY;          $(this).css({            "-webkit-transform": "rotateY(" + X / 50 + "deg) " + "rotateX(" + Y / 50 + "deg)"          });          })          .on(‘mouseleave‘, function() {            $(this).removeClass("smart3d");            $(this).css({              "-webkit-transform": "rotateY(0deg) rotateX(0deg)"            })          })     

ok,就是這麼簡單~還可以直接做成jQuery外掛程式，具體參考： https://github.com/tian0o0/html5/tree/master/smart_banner

仿鎚子商城首頁banner圖滑鼠跟隨及視覺差效果