网页模板——纯CSS3实现的百叶窗式切换轮播图特效源码.zip资源-CSDN文库

共13个文件

jpg：6个

css：3个

png：1个

版权申诉

55 浏览量 2021-11-23 09:01:17 上传评论收藏 420KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

网页模板——纯CSS3实现的百叶窗式切换轮播图特效源码.zip （13个子文件）

132686872132247512

css

htmleaf-demo.css 6KB

normalize.css 2KB

style.css 4KB

font

icomoon.eot 2KB

icomoon.ttf 1KB

images

5.jpg 54KB

3.jpg 29KB

4.jpg 23KB

2.jpg 32KB

1.jpg 39KB

retina_wood.png 174KB

6.jpg 64KB

index.html 4KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>纯CSS3百叶窗式切换轮播图特效</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <link rel="stylesheet" type="text/css" href="css/style.css">  </head> <body> <div class="htmleaf-container"> <header class="htmleaf-header"> <h1>纯CSS3百叶窗式切换轮播图特效 <span>Pure CSS Background Image Slideshow With Slice Animations</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> </header> <div class="container"> <input type="radio" name="slides" id="slide1" checked> <input type="radio" name="slides" id="slide2"> <input type="radio" name="slides" id="slide3"> <input type="radio" name="slides" id="slide4"> <input type="radio" name="slides" id="slide5"> <input type="radio" name="slides" id="slide6"> <div class="slider"> <div class="captions"> <div class="c1">duzy fiat</div> <div class="c2">syrenka</div> <div class="c3">wartburg</div> <div class="c4">warszawa</div> <div class="c5">wolga</div> <div class="c6">polonez</div> </div> <div class="img img1"> <div class="frag frag1"></div> <div class="frag frag2"></div> <div class="frag frag3"></div> <div class="frag frag4"></div> <div class="frag frag5"></div> <div class="frag frag6"></div> </div> <div class="img img2"> <div class="frag frag1"></div> <div class="frag frag2"></div> <div class="frag frag3"></div> <div class="frag frag4"></div> <div class="frag frag5"></div> <div class="frag frag6"></div> </div> <div class="img img3"> <div class="frag frag1"></div> <div class="frag frag2"></div> <div class="frag frag3"></div> <div class="frag frag4"></div> <div class="frag frag5"></div> <div class="frag frag6"></div> </div> <div class="img img4"> <div class="frag frag1"></div> <div class="frag frag2"></div> <div class="frag frag3"></div> <div class="frag frag4"></div> <div class="frag frag5"></div> <div class="frag frag6"></div> </div> <div class="img img5"> <div class="frag frag1"></div> <div class="frag frag2"></div> <div class="frag frag3"></div> <div class="frag frag4"></div> <div class="frag frag5"></div> <div class="frag frag6"></div> </div> <div class="img img6"> <div class="frag frag1"></div> <div class="frag frag2"></div> <div class="frag frag3"></div> <div class="frag frag4"></div> <div class="frag frag5"></div> <div class="frag frag6"></div> </div> </div>  <div class="side-controls"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> <label for="slide4"></label> <label for="slide5"></label> <label for="slide6"></label> </div> <div class="controls"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> <label for="slide4"></label> <label for="slide5"></label> <label for="slide6"></label> </div> </div> </body> </html>