js實(shí)現(xiàn)3d懸浮效果
效果如下:
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} ul,li{list-style: none;} .container{perspective: 1300;-webkit-perspective:1300;} .boxList{position:absolute;width: 630px;height:630px;left:50%;margin-left:-315px; -webkit-transform-style: preserve-3d;transform-style: preserve-3d;/*animation: a1 2s 1;*/transition: all 2s;} .boxList li{float: left;width: 200px;height: 200px;margin:5px;background: darkcyan;-webkit-transition: all 0.3s;transition: all 0.3s;} .on li:hover{-webkit-transform: translate3d(0,0,30px);transform: translate3d(0,0,30px);background:deepskyblue;box-shadow: 30px 30px 10px rgba(0, 0, 0, 0.5);} .on{webkit-transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);} </style> </head> <body> <div class="container"> <ul class="boxList"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> <script> var list=document.querySelector('.boxList'); window.onload=function(){ setInterval(transition,1000) } function transition(){ list.className='on boxList'; } </script> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
- 簡(jiǎn)單實(shí)現(xiàn)js懸浮導(dǎo)航效果
- JS控制彈出懸浮窗口(一覽畫面)的實(shí)例代碼
- JS實(shí)現(xiàn)兼容性好,自動(dòng)置頂?shù)奶詫殤腋」ぞ邫谛Ч?/a>
- JS實(shí)現(xiàn)自動(dòng)固定頂部的懸浮菜單欄效果
- js+cookies實(shí)現(xiàn)懸浮購(gòu)物車的方法
- javascript手工制作懸浮菜單
- js實(shí)現(xiàn)鼠標(biāo)懸浮給圖片加邊框的方法
- js鼠標(biāo)懸浮出現(xiàn)遮罩層的方法
- js QQ客服懸浮效果實(shí)現(xiàn)代碼
- js 左右懸浮對(duì)聯(lián)廣告特效代碼
相關(guān)文章
Javascript中函數(shù)名.length屬性用法分析(對(duì)比arguments.length)
這篇文章主要介紹了Javascript中函數(shù)名.length屬性用法,結(jié)合實(shí)例形式簡(jiǎn)單對(duì)比分析了與arguments.length屬性的用法區(qū)別,需要的朋友可以參考下2016-09-09Bootstrap輪播插件中圖片變形的終極解決方案 使用jqthumb.js
這篇文章主要介紹了Bootstrap輪播插件中圖片變形的終極解決方案,使用jqthumb.js,感興趣的小伙伴們可以參考一下2016-07-07如何實(shí)現(xiàn)JavaScript動(dòng)態(tài)加載CSS和JS文件
這篇文章主要為大家詳細(xì)介紹了JavaScript動(dòng)態(tài)加載CSS和JS文件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-10-10JS實(shí)用案例之輸入智能提示(打字機(jī)輸出效果)
最近在項(xiàng)目需求中遇到之前沒有做過的功能,下面這篇文章主要給大家介紹了關(guān)于JS實(shí)用案例之輸入智能提示,文中通過實(shí)例代碼介紹的非常詳細(xì),打字機(jī)輸出效果的相關(guān)資料,需要的朋友可以參考下2023-01-01Javascript實(shí)現(xiàn)頁面跳轉(zhuǎn)的幾種方式分享
這篇文章介紹了Javascript實(shí)現(xiàn)頁面跳轉(zhuǎn)的幾種方式,有需要的朋友可以參考一下2013-10-10跟我學(xué)習(xí)javascript的最新標(biāo)準(zhǔn)ES6
跟我學(xué)習(xí)javascript的最新標(biāo)準(zhǔn)ECMAScript 6,ES6(ECMAScript 6)是即將到來的新版本JavaScript語言的標(biāo)準(zhǔn),代號(hào)harmony,感興趣的小伙伴們可以參考一下2015-11-11