CSS3图片背景滑块幻灯片切换代码插件

CSS3图片背景滑块幻灯片切换代码插件

一款html5基于css3属性制作图片背景曲面滑块上下滚动幻灯片切换特效。

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>

文件信息:

    0

    发表评论