纯CSS3实现3D特效的iPhone 6动画
iPhone 6发布不久,屌丝怎能买得起,不过作为程序员,今天看到一个用纯CSS3绘制的iPhone 6,由于CSS3特性的运用,带有点3D的动画特效,大家可以先来看看在线演示效果。
HTML结构代码如下:
<div id="wrapper"> <div id="iphone"> <div id="side"></div> <div id="lines"> <div> <div> <div></div> </div> </div> <div> <div> <div></div> </div> </div> </div> <div id="toggler"> <div></div> </div> <div id="aux"></div> <div id="lightning"></div> <div id="bottom-speaker"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="skrews"> <div></div> <div></div> </div> <div id="volume"> <div></div> <div></div> </div> <div id="front"> <div id="front-cover"></div> <div id="camera"> <div></div> </div> <div id="speaker"></div> <div id="screen"> <div id="reminder"> <div></div> <div>Made by @_fbrz</div> <div>now</div> </div> <div id="circle"></div> <div id="time">12:42</div> <div id="date">Saturday, January 4</div> <div id="bottom"></div> <div id="top"></div> <div id="slide"> <div></div> slide to unlock </div> <div id="signal"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="battery"> <div>86%</div> <div> <div></div> <div></div> </div> </div> </div> <div id="home"> <div></div> </div> </div> <

