css3做幻灯片3
来源：互联网 发布：淘宝促销活动名称大全 编辑：程序博客网 时间：2024/05/13 09:41
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>css3做幻灯片3-css3实例站</title>
<meta name="keywords" content="css3做幻灯片 CSS3 CSS3培训 css3实例">
<meta name="description" content="css3做幻灯片、HTML5技术、WEB编程技术、前端研究、CSS3培训、css3实例">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="generator" content="Editplus ">
<meta name="author" content="Author：组会杰,QQ：871925574">
<meta name="robots" content="ALL">
<meta name="copyright" content="组会杰-css3实例站">
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
.frame {width:640px; height:96px; padding:510px 50px 10px 50px; margin:20px auto; overflow:hidden; position:relative; background:#fff; border:1px solid #ddd; border-radius:5px;}
.frame section {margin-left:0; width:50000px;
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
.frame img.large {position:absolute; width:640px; height:480px; top:10px; left:50px; opacity:0;
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
.frame input {display:none;}
.frame input.pics + label {display:block; width:126px; height:94px; float:left; margin:1px;}
.frame input.pics + label img {width:126px; height:94px; background:#fff;}
.frame label.left {position:absolute; left:0; bottom:10px; width:50px; height:96px; background:#fff;}
.frame label.right {position:absolute; right:0; bottom:10px; width:50px; height:96px; background:#fff;}
.frame label.left img,
.frame label.right img {margin-top:24px;}
.frame label.one,
.frame label.two,
.frame label.three,
.frame label.four {z-index:90;}
.frame input#push1:checked ~ label.four,
.frame input#push3:checked ~ label.one,
.frame input#push5:checked ~ label.two,
.frame input#push7:checked ~ label.three,
.frame input#push2:checked ~ label.two,
.frame input#push4:checked ~ label.three,
.frame input#push6:checked ~ label.four,
.frame input#push8:checked ~ label.one {z-index:100;}
.frame input#push1:checked ~ section {margin-left:-1920px;}
.frame input#push3:checked ~ section {margin-left:0;}
.frame input#push5:checked ~ section {margin-left:-640px;}
.frame input#push7:checked ~ section {margin-left:-1280px;}
.frame input#push2:checked ~ section {margin-left:-640px;}
.frame input#push4:checked ~ section {margin-left:-1280px;}
.frame input#push6:checked ~ section {margin-left:-1920px;}
.frame input#push8:checked ~ section {margin-left:0;}
.frame input.pics:checked + label {opacity:0.5;}
.frame input#pic1:checked ~ img.p1,
.frame input#pic2:checked ~ img.p2,
.frame input#pic3:checked ~ img.p3,
.frame input#pic4:checked ~ img.p4,
.frame input#pic5:checked ~ img.p5,
.frame input#pic6:checked ~ img.p6,
.frame input#pic7:checked ~ img.p7,
.frame input#pic8:checked ~ img.p8,
.frame input#pic9:checked ~ img.p9,
.frame input#pic10:checked ~ img.p10,
.frame input#pic11:checked ~ img.p11,
.frame input#pic12:checked ~ img.p12,
.frame input#pic13:checked ~ img.p13,
.frame input#pic14:checked ~ img.p14,
.frame input#pic15:checked ~ img.p15,
.frame input#pic16:checked ~ img.p16,
.frame input#pic17:checked ~ img.p17,
.frame input#pic18:checked ~ img.p18,
.frame input#pic19:checked ~ img.p19,
.frame input#pic20:checked ~ img.p20 {opacity:1; z-index:100;}
.frame p {padding:0; margin:0; position:absolute; left:50px; width:640px; text-align:center; bottom:110px; font:normal 12px/12px arial, sans-serif; color:#666;}
</style>
</head>
<body>
<section class="tips">
由于各位朋友的反映，<a href="http://www.css3train.com" target="_blank">本站</a>案例也开始做其他浏览器的兼容，以前的案例不再作更改。<br>
<p class="bredcolor">css3小技巧:</p>
做过js的朋友都会知道，幻灯片的实现原理其实和tab切换一样，前面说过<a href="tab.html" target="_blank">tab的实现原理</a>,不在重复！<br>
实验增加了小图片换组展示的效果，为了达到这个效果，肉眼上模拟了js的轮换。每一个换组我跟着一组标签，都是对应的，可以换几回，我就有几回的组<br>
qq群:197326136<br>
</section>
<section class="frame">
<input type="radio" name="push" id="push1" class="push">
<input type="radio" name="push" id="push2" class="push">
<input type="radio" name="push" id="push3" class="push">
<input type="radio" name="push" id="push4" class="push">
<input type="radio" name="push" id="push5" class="push">
<input type="radio" name="push" id="push6" class="push">
<input type="radio" name="push" id="push7" class="push">
<input type="radio" name="push" id="push8" class="push" checked="checked">
<label for="push1" class="left one">上一组</label>
<label for="push2" class="right one">下一组</label>
<label for="push3" class="left two">上一组</label>
<label for="push4" class="right two">下一组</label>
<label for="push5" class="left three">上一组</label>
<label for="push6" class="right three">下一组</label>
<label for="push7" class="left four">上一组</label>
<label for="push8" class="right four">下一组</label>
<section>
<input type="radio" name="pic" id="pic1" class="pics" checked="checked"><label for="pic1"><img src="../images/point/1.jpg" alt=""></label>
<input type="radio" name="pic" id="pic2" class="pics"><label for="pic2"><img src="../images/point/2.jpg" alt=""></label>
<input type="radio" name="pic" id="pic3" class="pics"><label for="pic3"><img src="../images/point/3.jpg" alt=""></label>
<input type="radio" name="pic" id="pic4" class="pics"><label for="pic4"><img src="../images/point/4.jpg" alt=""></label>
<input type="radio" name="pic" id="pic5" class="pics"><label for="pic5"><img src="../images/point/5.jpg" alt=""></label>
<input type="radio" name="pic" id="pic6" class="pics"><label for="pic6"><img src="../images/point/6.jpg" alt=""></label>
<input type="radio" name="pic" id="pic7" class="pics"><label for="pic7"><img src="../images/point/7.jpg" alt=""></label>
<input type="radio" name="pic" id="pic8" class="pics"><label for="pic8"><img src="../images/point/8.jpg" alt=""></label>
<input type="radio" name="pic" id="pic9" class="pics"><label for="pic9"><img src="../images/point/9.jpg" alt=""></label>
<input type="radio" name="pic" id="pic10" class="pics"><label for="pic10"><img src="../images/point/10.jpg" alt=""></label>
<input type="radio" name="pic" id="pic11" class="pics"><label for="pic11"><img src="../images/point/1.jpg" alt=""></label>
<input type="radio" name="pic" id="pic12" class="pics"><label for="pic12"><img src="../images/point/2.jpg" alt=""></label>
<input type="radio" name="pic" id="pic13" class="pics"><label for="pic13"><img src="../images/point/3.jpg" alt=""></label>
<input type="radio" name="pic" id="pic14" class="pics"><label for="pic14"><img src="../images/point/4.jpg" alt=""></label>
<input type="radio" name="pic" id="pic15" class="pics"><label for="pic15"><img src="../images/point/5.jpg" alt=""></label>
<input type="radio" name="pic" id="pic16" class="pics"><label for="pic16"><img src="../images/point/6.jpg" alt=""></label>
<input type="radio" name="pic" id="pic17" class="pics"><label for="pic17"><img src="../images/point/7.jpg" alt=""></label>
<input type="radio" name="pic" id="pic18" class="pics"><label for="pic18"><img src="../images/point/8.jpg" alt=""></label>
<input type="radio" name="pic" id="pic19" class="pics"><label for="pic19"><img src="../images/point/9.jpg" alt=""></label>
<input type="radio" name="pic" id="pic20" class="pics"><label for="pic20"><img src="../images/point/10.jpg" alt=""></label>
<p>本站图片只供实验用</p>
<img class="p1 large" src="../images/1.jpg" alt="">
<img class="p2 large" src="../images/2.jpg" alt="">
<img class="p3 large" src="../images/3.jpg" alt="">
<img class="p4 large" src="../images/4.jpg" alt="">
<img class="p5 large" src="../images/5.jpg" alt="">
<img class="p6 large" src="../images/6.jpg" alt="">
<img class="p7 large" src="../images/7.jpg" alt="">
<img class="p8 large" src="../images/8.jpg" alt="">
<img class="p9 large" src="../images/9.jpg" alt="">
<img class="p10 large" src="../images/10.jpg" alt="">
<img class="p11 large" src="../images/1.jpg" alt="">
<img class="p12 large" src="../images/2.jpg" alt="">
<img class="p13 large" src="../images/3.jpg" alt="">
<img class="p14 large" src="../images/4.jpg" alt="">
<img class="p15 large" src="../images/5.jpg" alt="">
<img class="p16 large" src="../images/6.jpg" alt="">
<img class="p17 large" src="../images/7.jpg" alt="">
<img class="p18 large" src="../images/8.jpg" alt="">
<img class="p19 large" src="../images/9.jpg" alt="">
<img class="p20 large" src="../images/10.jpg" alt="">
</section>
</section>
</body>
</html>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>css3做幻灯片3-css3实例站</title>
<meta name="keywords" content="css3做幻灯片 CSS3 CSS3培训 css3实例">
<meta name="description" content="css3做幻灯片、HTML5技术、WEB编程技术、前端研究、CSS3培训、css3实例">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="generator" content="Editplus ">
<meta name="author" content="Author：组会杰,QQ：871925574">
<meta name="robots" content="ALL">
<meta name="copyright" content="组会杰-css3实例站">
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
.frame {width:640px; height:96px; padding:510px 50px 10px 50px; margin:20px auto; overflow:hidden; position:relative; background:#fff; border:1px solid #ddd; border-radius:5px;}
.frame section {margin-left:0; width:50000px;
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
.frame img.large {position:absolute; width:640px; height:480px; top:10px; left:50px; opacity:0;
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
.frame input {display:none;}
.frame input.pics + label {display:block; width:126px; height:94px; float:left; margin:1px;}
.frame input.pics + label img {width:126px; height:94px; background:#fff;}
.frame label.left {position:absolute; left:0; bottom:10px; width:50px; height:96px; background:#fff;}
.frame label.right {position:absolute; right:0; bottom:10px; width:50px; height:96px; background:#fff;}
.frame label.left img,
.frame label.right img {margin-top:24px;}
.frame label.one,
.frame label.two,
.frame label.three,
.frame label.four {z-index:90;}
.frame input#push1:checked ~ label.four,
.frame input#push3:checked ~ label.one,
.frame input#push5:checked ~ label.two,
.frame input#push7:checked ~ label.three,
.frame input#push2:checked ~ label.two,
.frame input#push4:checked ~ label.three,
.frame input#push6:checked ~ label.four,
.frame input#push8:checked ~ label.one {z-index:100;}
.frame input#push1:checked ~ section {margin-left:-1920px;}
.frame input#push3:checked ~ section {margin-left:0;}
.frame input#push5:checked ~ section {margin-left:-640px;}
.frame input#push7:checked ~ section {margin-left:-1280px;}
.frame input#push2:checked ~ section {margin-left:-640px;}
.frame input#push4:checked ~ section {margin-left:-1280px;}
.frame input#push6:checked ~ section {margin-left:-1920px;}
.frame input#push8:checked ~ section {margin-left:0;}
.frame input.pics:checked + label {opacity:0.5;}
.frame input#pic1:checked ~ img.p1,
.frame input#pic2:checked ~ img.p2,
.frame input#pic3:checked ~ img.p3,
.frame input#pic4:checked ~ img.p4,
.frame input#pic5:checked ~ img.p5,
.frame input#pic6:checked ~ img.p6,
.frame input#pic7:checked ~ img.p7,
.frame input#pic8:checked ~ img.p8,
.frame input#pic9:checked ~ img.p9,
.frame input#pic10:checked ~ img.p10,
.frame input#pic11:checked ~ img.p11,
.frame input#pic12:checked ~ img.p12,
.frame input#pic13:checked ~ img.p13,
.frame input#pic14:checked ~ img.p14,
.frame input#pic15:checked ~ img.p15,
.frame input#pic16:checked ~ img.p16,
.frame input#pic17:checked ~ img.p17,
.frame input#pic18:checked ~ img.p18,
.frame input#pic19:checked ~ img.p19,
.frame input#pic20:checked ~ img.p20 {opacity:1; z-index:100;}
.frame p {padding:0; margin:0; position:absolute; left:50px; width:640px; text-align:center; bottom:110px; font:normal 12px/12px arial, sans-serif; color:#666;}
</style>
</head>
<body>
<section class="tips">
由于各位朋友的反映，<a href="http://www.css3train.com" target="_blank">本站</a>案例也开始做其他浏览器的兼容，以前的案例不再作更改。<br>
<p class="bredcolor">css3小技巧:</p>
做过js的朋友都会知道，幻灯片的实现原理其实和tab切换一样，前面说过<a href="tab.html" target="_blank">tab的实现原理</a>,不在重复！<br>
实验增加了小图片换组展示的效果，为了达到这个效果，肉眼上模拟了js的轮换。每一个换组我跟着一组标签，都是对应的，可以换几回，我就有几回的组<br>
qq群:197326136<br>
</section>
<section class="frame">
<input type="radio" name="push" id="push1" class="push">
<input type="radio" name="push" id="push2" class="push">
<input type="radio" name="push" id="push3" class="push">
<input type="radio" name="push" id="push4" class="push">
<input type="radio" name="push" id="push5" class="push">
<input type="radio" name="push" id="push6" class="push">
<input type="radio" name="push" id="push7" class="push">
<input type="radio" name="push" id="push8" class="push" checked="checked">
<label for="push1" class="left one">上一组</label>
<label for="push2" class="right one">下一组</label>
<label for="push3" class="left two">上一组</label>
<label for="push4" class="right two">下一组</label>
<label for="push5" class="left three">上一组</label>
<label for="push6" class="right three">下一组</label>
<label for="push7" class="left four">上一组</label>
<label for="push8" class="right four">下一组</label>
<section>
<input type="radio" name="pic" id="pic1" class="pics" checked="checked"><label for="pic1"><img src="../images/point/1.jpg" alt=""></label>
<input type="radio" name="pic" id="pic2" class="pics"><label for="pic2"><img src="../images/point/2.jpg" alt=""></label>
<input type="radio" name="pic" id="pic3" class="pics"><label for="pic3"><img src="../images/point/3.jpg" alt=""></label>
<input type="radio" name="pic" id="pic4" class="pics"><label for="pic4"><img src="../images/point/4.jpg" alt=""></label>
<input type="radio" name="pic" id="pic5" class="pics"><label for="pic5"><img src="../images/point/5.jpg" alt=""></label>
<input type="radio" name="pic" id="pic6" class="pics"><label for="pic6"><img src="../images/point/6.jpg" alt=""></label>
<input type="radio" name="pic" id="pic7" class="pics"><label for="pic7"><img src="../images/point/7.jpg" alt=""></label>
<input type="radio" name="pic" id="pic8" class="pics"><label for="pic8"><img src="../images/point/8.jpg" alt=""></label>
<input type="radio" name="pic" id="pic9" class="pics"><label for="pic9"><img src="../images/point/9.jpg" alt=""></label>
<input type="radio" name="pic" id="pic10" class="pics"><label for="pic10"><img src="../images/point/10.jpg" alt=""></label>
<input type="radio" name="pic" id="pic11" class="pics"><label for="pic11"><img src="../images/point/1.jpg" alt=""></label>
<input type="radio" name="pic" id="pic12" class="pics"><label for="pic12"><img src="../images/point/2.jpg" alt=""></label>
<input type="radio" name="pic" id="pic13" class="pics"><label for="pic13"><img src="../images/point/3.jpg" alt=""></label>
<input type="radio" name="pic" id="pic14" class="pics"><label for="pic14"><img src="../images/point/4.jpg" alt=""></label>
<input type="radio" name="pic" id="pic15" class="pics"><label for="pic15"><img src="../images/point/5.jpg" alt=""></label>
<input type="radio" name="pic" id="pic16" class="pics"><label for="pic16"><img src="../images/point/6.jpg" alt=""></label>
<input type="radio" name="pic" id="pic17" class="pics"><label for="pic17"><img src="../images/point/7.jpg" alt=""></label>
<input type="radio" name="pic" id="pic18" class="pics"><label for="pic18"><img src="../images/point/8.jpg" alt=""></label>
<input type="radio" name="pic" id="pic19" class="pics"><label for="pic19"><img src="../images/point/9.jpg" alt=""></label>
<input type="radio" name="pic" id="pic20" class="pics"><label for="pic20"><img src="../images/point/10.jpg" alt=""></label>
<p>本站图片只供实验用</p>
<img class="p1 large" src="../images/1.jpg" alt="">
<img class="p2 large" src="../images/2.jpg" alt="">
<img class="p3 large" src="../images/3.jpg" alt="">
<img class="p4 large" src="../images/4.jpg" alt="">
<img class="p5 large" src="../images/5.jpg" alt="">
<img class="p6 large" src="../images/6.jpg" alt="">
<img class="p7 large" src="../images/7.jpg" alt="">
<img class="p8 large" src="../images/8.jpg" alt="">
<img class="p9 large" src="../images/9.jpg" alt="">
<img class="p10 large" src="../images/10.jpg" alt="">
<img class="p11 large" src="../images/1.jpg" alt="">
<img class="p12 large" src="../images/2.jpg" alt="">
<img class="p13 large" src="../images/3.jpg" alt="">
<img class="p14 large" src="../images/4.jpg" alt="">
<img class="p15 large" src="../images/5.jpg" alt="">
<img class="p16 large" src="../images/6.jpg" alt="">
<img class="p17 large" src="../images/7.jpg" alt="">
<img class="p18 large" src="../images/8.jpg" alt="">
<img class="p19 large" src="../images/9.jpg" alt="">
<img class="p20 large" src="../images/10.jpg" alt="">
</section>
</section>
</body>
</html>
- css3做幻灯片3
- css3做幻灯片2
- CSS3 幻灯片
- css3透明幻灯片切换
- css3幻灯片换位效果
- css3实现幻灯片效果
- 3D幻灯片轮换（CSS3+原生js）
- css3配合jq的3d立体跑马灯幻灯片
- 幻灯片做视频
- 背景图做幻灯片
- jQuery+CSS3旋转幻灯片代码
- css3写幻灯片css部分
- 用reveal.js做幻灯片
- 使用swipe.js做幻灯片
- jQuery和CSS3超酷3d翻转图片幻灯片插件
- 使用HTML5和CSS3来创建幻灯片
- jQuery和CSS3超酷三面板幻灯片插件
- CSS3: animation实现简易幻灯片(轮播)
- 用css3的transform制作apple的展示台
- js+cookie
- 用css3仿制js的弹力效果
- copy file
- 让PHP更快的提供文件下载
- css3做幻灯片3
- 网站发布后，form验证出问题，页面老返回到登陆页面
- css3做幻灯片2
- /bin,/sbin,/usr/sbin,/usr/bin 目录之简单区别
- long float double long double 始化
- 使用colinux在windows上虚拟linux
- 使用MAT时的Shallow Size和 Retained Size的区别
- 用css3制作模块变大的效果
- WebServer 使用笔记
