投稿 搜索

热门文章

当前位置: 站长天下 / Html5 CSS3 / html5 CSS3图片背景滑块幻灯片切换代码
html5 CSS3图片背景滑块幻灯片切换代码
标签:

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-06-26
    阅读:

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

简要教程

一款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>