首先聲明，對于新版瀏覽器，這種特效IE支持效果差，opera完全不支持 。主要就是CSS3的2D旋轉+3D旋轉簡單說一下吧：1.HTML架構用一個大div絕對定位，里面放6X3共18個小div，每個小div通過backgroundPosition對背景圖片切割 。拼出一個完整的圖2.css3主要使用的就是transition屬性，角度變換主要使用transform，并根據不同瀏覽器寫transition：-webkit-transform 1s,transform 1s,width 1,height 1s,background-size 1s,background-position 1s;等transform：'rotate('+(Math.random()*567)+'deg') rotateX(同上) rotateY(同上)‘;3.javascript用javascript動態的 創建大div+18個小div->觸發css3特效炸開DIV->刪除大div+18個小div->再創建總結原理：將大div放大的同時把18個小div按和大div的比例放大，同時18div的background-size和background-position同時放大，與此同時2D角度和3DX軸Y軸的角度旋轉同時發生，并且透明度也從1變成0，等他們消失的時候把這些div從DOM樹中刪除，然后重新創建，重復這個過程就是你看到的效果 。如果想要源代碼留郵箱 。我已經做出來了 。兼容（safair+chrome+firefox+360）
【智能社首頁那個圖片炸開的效果怎樣實現】

猜你喜歡

• 越南是社會還是資本
• 智能健身儀的危害有哪些
• 三相智能電表
• 佛山市中旅國際旅行社有限公司怎么樣？
• 蕭鼓追隨春社近下一句 蕭鼓追隨春社近的原文及翻譯
• 本市換單位社保怎么轉 本市換單位社保如何轉呢
• 八月十有八日石門社飲原文、作者
• 購買社保要什么條件
• 青團社兼職靠譜嗎
• 智能燈好不好用呢？這里有答案