HTML5 CSS3图片背景滑块代码

手游变态 2019-11-19 52 阅读

特效描述:利用HTML5 CSS3实现 图片背景 滑块代码,利用HTML5 CSS3实现图片背景滑块代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery.min.js"></script>

<script src="js/index.js"></script>

3. 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>
<script src="js/jquery.min.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

演示地址下载地址

最新游戏