css3配合js做王者榮耀旋轉購買英雄效果源碼展示

css3教程  ui設計

方法/步驟

css3配合js做王者榮耀3D旋轉購買英雄效果以及源碼展示    註:為了讓大家可以直接pc端複製粘貼代碼,不用自己敲,這裡直接給大家上代碼了!    ******裡面js部分運用一些很牛的算法促使運動之後有運動痕跡,這樣有用緩衝效果!html:    <body>    <ul id="ul1">    </ul>    </body>css:<style>*{margin: 0;padding: 0;list-style: none;}body{background: #000;}#ul1{width:133px;height:247px;position: absolute;left:50%;top:50%;margin-left: -67px;margin-top: -200px;transform:perspective(800px) rotateX(-10deg);transform-style: preserve-3d;}#ul1 li{width:100%;height:100%;position: absolute;left:0;top:0;background: url(img/1.jpg) no-repeat;background-size:100%;box-shadow: 0 0 20px #fff;-webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.4));}/*#ul1:active li{transform:rotateY(60deg) translateZ(200px);}*/</style>javascript:<script>window.onload=function(){var oUl=document.getElementById('ul1');var N=11;for(var i=0; i<N; i++){var oLi=document.createElement('li');oLi.style.backgroundImage='url(img/'+(i+1)+'.jpg)';oUl.appendChild(oLi);oLi.style.transition='.4s all ease '+(N-i)*200+'ms';(function(oLi,i){setTimeout(function(){oLi.style.transform='rotateY('+360/N*i+'deg) translateZ(300px)';},0);})(oLi,i);}//鍵盤控制var y=0;var x=-10;var aLi=oUl.children;aLi[0].addEventListener('transitionend',function(){change();},false);//拖拽var lastX=0;var lastY=0;var iSpeedX=0;var iSpeedY=0;var timer=null;document.onmousedown=function(ev){var disX=ev.clientX-y;var disY=ev.clientY-x;clearInterval(timer);for(var i=0; i<aLi.length; i++){aLi[i].style.transition='none';}document.onmousemove=function(ev){y=ev.clientX-disX;x=ev.clientY-disY;change(y/3,x/3);iSpeedX=ev.clientX-lastX;iSpeedY=ev.clientY-lastY;lastX=ev.clientX;lastY=ev.clientY;};document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null;timer=setInterval(function(){iSpeedX*=0.95;iSpeedY*=0.95;y+=iSpeedX;x+=iSpeedY;change(y/3,x/3);},30);};return false;};function change(y,x){for(var i=0; i<aLi.length; i++){//aLi[i].style.transition='1s all ease';aLi[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';oUl.style.transform='perspective(800px) rotateX('+-x+'deg)';var scale=Math.abs(Math.abs((360/N*i+y)%360)-180)/180;scale<0.3 && (scale=0.3);aLi[i].style.opacity=scale;}}};</script>    <script>    window.onload=function(){    var oUl=document.getElementById('ul1');    var N=11;    for(var i=0; i    var oLi=document.createElement('li');    oLi.style.backgroundImage='url(img/'+(i+1)+'.jpg)';    oUl.appendChild(oLi);    oLi.style.transition='.4s all ease '+(N-i)*200+'ms';    (function(oLi,i){    setTimeout(function(){    oLi.style.transform='rotateY('+360/N*i+'deg) translateZ(300px)';    },0);    })(oLi,i);    }    //鍵盤控制    var y=0;    var x=-10;    var aLi=oUl.children;    aLi[0].addEventListener('transitionend',function(){    change();    },false);    //拖拽    var lastX=0;    var lastY=0;    var iSpeedX=0;    var iSpeedY=0;    var timer=null;    document.onmousedown=function(ev){    var disX=ev.clientX-y;    var disY=ev.clientY-x;    clearInterval(timer);    for(var i=0; i    aLi[i].style.transition='none';    }    document.onmousemove=function(ev){    y=ev.clientX-disX;    x=ev.clientY-disY;    change(y/3,x/3);    iSpeedX=ev.clientX-lastX;    iSpeedY=ev.clientY-lastY;    lastX=ev.clientX;    lastY=ev.clientY;    };    document.onmouseup=function(){    document.onmousemove=null;    document.onmouseup=null;    timer=setInterval(function(){    iSpeedX*=0.95;    iSpeedY*=0.95;    y+=iSpeedX;    x+=iSpeedY;    change(y/3,x/3);    },30);    };    return false;    };    function change(y,x){    for(var i=0; i    //aLi[i].style.transition='1s all ease';    aLi[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';    oUl.style.transform='perspective(800px) rotateX('+-x+'deg)';    var scale=Math.abs(Math.abs((360/N*i+y)%360)-180)/180;    scale<0.3 && (scale=0.3);    aLi[i].style.opacity=scale;    }    }    };    </script>注意:記住一定要有一個圖片文件夾,裡面放你旋轉的11張圖片(當然你要是看懂js代碼了,可以自己想放幾張圖片都可以!!!)!圖片名字從1.jpg開始(都是數字,這樣方便計算)\\

相關文章

  1. 王者榮耀怎麼購買英雄

    手遊王者榮耀遊戲是玩家通過控制英雄來PK的一款競技類遊戲,所以操作不同的英雄就會有不同的體驗.一開始系統會自動送我們一些普通的英雄,但是一些厲害的英雄就需要我們通過購買來獲得了.那如何購買英雄呢?下面 ...
  2. 王者榮耀如何購買英雄

    手遊王者榮耀中英雄眾多,每周都會有限免的英雄可以使用,其餘的就需要我們購買後才能使用,這裡我簡單的介紹一下手遊王者榮耀的英雄購買方法. 工具/原料 手機 王者榮耀遊戲軟體 方法/步驟 第一步:登錄遊戲 ...
  3. 手遊王者榮耀怎樣購買英雄?

    小編最近在玩一款moba手遊,話說王者榮耀這款手遊最近火得厲害,周圍不少人都在玩.但如果玩家還是新手的話,可以學習的技能很多,其中之一便是添加,或者說購買新英雄了.用什麼購買?怎樣購買?在哪裡購買?你 ...
  4. 王者榮耀如何購買英雄?

    對於新手來說,玩王者榮耀時,感覺遊戲送的英雄也只有那幾個,那怎麼辦呢,這就涉及到購買英雄了,具體如何購買,請看下面的步驟 工具/原料 王者榮耀 方法/步驟 點擊手機桌面上的"王者榮耀&quo ...
  5. 王者榮耀怎麼購買英雄的皮膚

    王者榮耀怎麼購買英雄的皮膚呢?下面,就讓小編給大家介紹一下吧. 方法/步驟 首先,我們點擊手機裡面的王者榮耀圖標打開王者榮耀. 打開之後,我們點擊王者榮耀的左下角的"英雄". 選擇 ...
  6. 王者榮耀怎麼購買英雄,王者榮耀如何獲得英雄

    有時候我們在使用王者榮耀的時候,想獲得英雄,怎麼操作呢,下面來分享一下方法 工具/原料 手機 王者榮耀 方法/步驟 第一步登錄帳號進去主界面,選擇英雄,獲得英雄一般是通過金幣,鑽石購買的,還有一種通過 ...
  7. 王者榮耀如何購買英雄及皮膚

    王者榮耀以其快捷簡單的操作及炫酷的操作界面,被廣大玩家所追隨,那王者榮耀中,如何購買新的英雄,如何給英雄購買皮膚,購買的皮膚又有什麼作用呢 工具/原料 王者榮耀 方法/步驟 打開王者榮耀客戶端,點擊右 ...
  8. 王者榮耀怎樣購買英雄?

    很多人在玩王者榮耀的時候看著別人的英雄很好用,而自己卻沒有合適的英雄,今天我們就一起來看一下,在王者榮耀中怎樣購買英雄? 方法/步驟 首先,購買英雄需要一定的金幣或者鑽石,這個在我們一打開王者榮耀這個 ...
  9. 王者榮耀怎麼樣購買英雄

    通過不斷的賺取金幣以及獲得鑽石,就可以去購買英雄了,那麼怎麼購買呢,小編手把手教您. 工具/原料 王者榮耀 方法/步驟 首先,從手機上打開遊戲客戶端,選擇自己所要玩的遊戲區服後,進入遊戲,如下圖所示. ...
  10. 王者榮耀怎麼購買英雄?

    當我們玩王者榮耀時,時常會看到各種各樣的任務角色,那麼,我們該怎樣在王者榮耀中購買英雄呢?今天,小編將教大家一種方法來進行購買,希望能對你們有所幫助. 工具/原料 安卓智慧型手機 王者榮耀遊戲APP 方 ...
  11. 王者榮耀怎麼購買英雄 英雄怎麼購買

    王者榮耀怎麼購買英雄 英雄怎麼購買,怎麼用金幣或點券購買英雄 工具/原料 王者榮耀 方法/步驟 點擊商城 點擊左側的英雄 任意選擇一個想要的英雄點擊 可以看到英雄的詳細信息,技能用法 攻擊力等 點擊下 ...
  12. 新手玩王者榮耀如何購買和選擇英雄?

    新手玩王者榮耀如何購買和選擇英雄?我們在玩遊戲的時候,會發現每次打完一局都會有金幣送,每天登陸王者榮耀會有鑽石送. 方法/步驟 用銀幣購買英雄. 我們可以用我們玩遊戲積累下來的銀幣來購買英雄.當然在我 ...
  13. 王者榮耀銘文怎麼獲取_王者榮耀怎麼購買銘文

    王者榮耀是當下最熱門的一款手遊,合理的使用銘文能夠讓我們英雄更強,排位升的更快.那麼,王者榮耀銘文怎麼獲取_王者榮耀怎麼購買銘文呢?下面讓我來給大家介紹下吧,希望對大家有所幫助. 工具/原料 王者榮耀 ...
  14. 王者榮耀怎麼購買裝備/出售裝備

    在王者榮耀對戰模式或者排位賽中,裝備購買.出售其實是一件非常簡單的事情,本人小編並不想寫這篇經驗的,但是晚上在玩排位賽的時候,玩到後期發現隊伍里有個戰友居然一件裝備都沒買,可想而知,結果被這為戰友給狠 ...
  15. 新玩家怎樣在王者榮耀裡面購買想要的英雄?

    這款moba手遊王者榮耀是一款非常不錯的手機端網遊,隨著朋友們的召喚之下,不少玩家加入了王者榮耀的戰鬥中,但是有部分玩家對裡面英雄的使用和購買還不熟悉.下面先來介紹一下怎樣購買英雄? 工具/原料 手遊 ...
  16. 王者榮耀怎麼購買扁鵲

    王者榮耀扁鵲英雄的購買方法 工具/原料 手機 方法/步驟 首先找到遊戲快捷方式點擊進入遊戲,現在就來到了遊戲頁面,點擊找到軟體窗口右上角的商城圖標,直接點擊打開商城 現在就來到了遊戲商城,點擊左邊的& ...
  17. 如何做王者榮耀打手

    王者榮耀遊戲裡,打手是不可或缺的,當然其他角色也必不可少,那麼如何做好一個打手呢? 方法/步驟 手遊里,王者榮耀火的一塌糊塗,那麼這款遊戲主要考驗的就是玩家的手速以及操作熟練度,以及裝備的搭配,還有就 ...
  18. 王者榮耀如何購買戰隊專屬頭像框?

    小編玩王者榮耀有一年多了吧,說實話,這款遊戲還是很值得玩的,小編玩起這個來還是挺簡單的,因為小編有玩英雄聯盟的經驗,而王者榮耀這款遊戲,說實話和英雄聯盟裡面的一些英雄很大一部分相似,尤其技能上,今天小 ...
  19. 王者榮耀怎麼購買加速卡

    王者榮耀怎麼購買加速卡呢?下面,就讓小編給大家介紹一下吧. 方法/步驟 首先,我們點擊手機裡面的王者榮耀圖標打開王者榮耀. 打開之後,我們點擊王者榮耀的右上角點券後面的"+"號. ...
  20. 王者榮耀怎麼購買改名卡?王者榮耀改名攻略?

    王者榮耀是小編一直都在玩的遊戲,小編有兩個帳號,大號已經達到了鑽石,小號現在也已經打到了黃金,小編今天就和大家說下:王者榮耀怎麼購買改名卡?王者榮耀改名攻略? 工具/原料 王者榮耀 方法/步驟 我們要 ...