纯CSS3模拟iPhoneX背景切换动画相框展示
woo_iphoneAlbum.css,woo_iphoneAlbum.js
下部图片列表可以左右滑动
<div class="workspace">
<div class="bg-content"></div>
<div class="mobile-body">
<div class="top-bar">
<div class="camera"></div>
<div class="speaker"></div>
</div>
<div class="button volume-up"></div>
<div class="button volume-down"></div>
<div class="button silent"></div>
<div class="button power"></div>
<div class="layer-2"></div>
<div class="layer-1"></div>
<div class="layer-gradient-1"></div>
<div class="layer-gradient-2"></div>
</div>
<div class="gallery-content" >
<div class="gallery-content__img active" data-img="image/woo_bg-1.jpg"><img src="image/woo_bg-1.jpg"></div>
<div class="gallery-content__img" data-img="image/woo_bg-2.jpg"><img src="image/woo_bg-2.jpg"></div>
<div class="gallery-content__img" data-img="image/woo_bg-4.jpg"><img src="image/woo_bg-4.jpg"></div>
<div class="gallery-content__img" data-img="image/woo_bg-9.jpg"><img src="image/woo_bg-9.jpg"></div>
<div class="gallery-content__img" data-img="image/woo_bg-10.jpg"><img src="image/woo_bg-10.jpg"></div>
</div>
</div>
使用原生代码,进行循环赋值,此版本针对手机版浏览使用