文章插图
首先声明，对于新版浏览器，这种特效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）
【智能社首页那个图片炸开的效果怎样实现】
推荐阅读
- 越南是社会还是资本
- 智能健身仪的危害有哪些
- 三相智能电表
- 佛山市中旅国际旅行社有限公司怎么样？
- 萧鼓追随春社近下一句 萧鼓追随春社近的原文及翻译
- 本市换单位社保怎么转 本市换单位社保如何转呢
- 八月十有八日石门社饮原文、作者
- 购买社保要什么条件
- 青团社兼职靠谱吗
- 智能灯好不好用呢？这里有答案