一款html5基于css3属性制作图片背景曲面滑块上下滚动幻灯片切换特效。
HTML结构
<div class="cont"> <div class="mouse"></div> <div class="app"> <div class="app__bgimg"> <div class="app__bgimg-image app__bgimg-image--1"> </div> <div class="app__bgimg-image app__bgimg-image--2"> </div> </div> <div class="app__img"> <img onMouseDown="return false" src="img/whiteTest4.png" alt="city" /> </div> <div class="app__text app__text--1"> <div class="app__text-line app__text-line--4">imperdiet </div> <div class="app__text-line app__text-line--3">ut le</div> <div class="app__text-line app__text-line--2">non tincidunt </div> <div class="app__text-line app__text-line--1"><img src="img/opus-attachment.png" alt="" /></div> </div> <div class="app__text app__text--2"> <div class="app__text-line app__text-line--4">habitant</div> <div class="app__text-line app__text-line--3">ut eget</div> <div class="app__text-line app__text-line--2">Nam imperdiet</div> <div class="app__text-line app__text-line--1"><img src="img/opus-attachment.png" alt="" /></div> </div> </div> <div class="pages"> <ul class='pages__list'> <li data-target='1' class='pages__item pages__item--1 page__item-active'></li> <li data-target='2' class='pages__item pages__item--2'></li> </ul> </div> </div>