<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3图片幻灯片切换效果</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
</head>
<body>
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="#">
<img src="images/img_1.jpg" alt="Cougar"/>
</a>
<div class="tooltip">
<h1>Cougar</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="#">
<img src="images/img_2.jpg" alt="Lions"/>
</a>
<div class="tooltip">
<h1>Lions</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<a href="#">
<img src="images/img_3.jpg" alt="Snowalker"/>
</a>
<div class="tooltip">
<h1>Snowalker</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<a href="#">
<img src="images/img_4.jpg" alt="Howling"/>
</a>
<div class="tooltip">
<h1>Howling</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<a href="#">
<img src="images/img_5.jpg" alt="Sunbathing"/>
</a>
<div class="tooltip">
<h1>Sunbathing</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>
</body>
</html>
纯css3图片幻灯片切换效果(无js实现).zip
版权申诉
85 浏览量
2022-11-09
22:10:58
上传
评论
收藏 318KB ZIP 举报
纯css3图片幻灯片切换效果(无js实现).zip （10个子文件） 
132675094943711508 css 
reset.css 1KB animation.css 4KB style.css 3KB images 
img_3.jpg 77KB img_5.jpg 79KB
bg.png 265B img_1.jpg 49KB img_2.jpg 61KB img_4.jpg 49KB
index.html 2KB资源评论
