这款css3 iPhone6动画效果中没有使用图片,纯css3打造。
HTML结构
<div id="wrapper"> <div id="iphone"> <div id="side"></div> <div id="lines"> ...... </div> <div id="toggler"> <div></div> </div> <div id="aux"></div> <div id="lightning"></div> <div id="bottom-speaker"> ...... </div> <div id="skrews"> ...... </div> <div id="volume"> ...... </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 id="battery"> <div>86%</div> ...... </div> </div> <div id="home"> <div></div> </div> </div> <div id="shadow"></div> </div> </div>
CSS代码请参考下载文件。