CSS3做的幻灯片特效
CSS3做的幻灯片特效，主要是使用CSS3的target伪类，它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个”#”字符，然后后面带有一个标志符名称，比如#b1，target就是用来匹配ID为b1的元素的。
当前位置：编程学习 > JS >>
答案：<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<title>css3做幻灯片</title>
<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;}
.cssplayStack {position:relative; width:520px; height:250px; margin:0 auto;margin-top:130px;}
.cssplayStack b {position:fixed; display:none;}
.cssplayStack a {display:block; outline:0; position: absolute; left:20px; bottom:20px; width: 480px; height: 280px; z-index:25;
-moz-transition:1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
.cssplayStack img {width:200px;height:200px;display:block; position:absolute; left:260px; bottom:20px; border:1px solid #fff; box-shadow:0 15px 10px -15px rgba(0,0,0,0.8);
-moz-transition:1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
.cssplayStack .p1 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
.cssplayStack .p2 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
.cssplayStack .p3 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
.cssplayStack .p4 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
.cssplayStack .p5 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
.cssplayStack .p6 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
.cssplayStack .p7 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
.cssplayStack .p8 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
.cssplayStack .p9 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b9:target ~ .a8 {z-index:30;}
#b9:target ~ .p9 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b9:target ~ .p1 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b9:target ~ .p2 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b9:target ~ .p3 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b9:target ~ .p4 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b9:target ~ .p5 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b9:target ~ .p6 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b9:target ~ .p7 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b9:target ~ .p8 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b8:target ~ .a7 {z-index:30;}
#b8:target ~ .p8 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b8:target ~ .p9 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b8:target ~ .p1 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b8:target ~ .p2 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b8:target ~ .p3 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b8:target ~ .p4 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b8:target ~ .p5 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b8:target ~ .p6 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b8:target ~ .p7 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b7:target ~ .a6 {z-index:30;}
#b7:target ~ .p7 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b7:target ~ .p8 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b7:target ~ .p9 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b7:target ~ .p1 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b7:target ~ .p2 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b7:target ~ .p3 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b7:target ~ .p4 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b7:target ~ .p5 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b7:target ~ .p6 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b6:target ~ .a5 {z-index:30;}
#b6:target ~ .p6 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b6:target ~ .p7 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b6:target ~ .p8 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b6:target ~ .p9 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b6:target ~ .p1 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b6:target ~ .p2 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b6:target ~ .p3 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b6:target ~ .p4 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b6:target ~ .p5 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b5:target ~ .a4 {z-index:30;}
#b5:target ~ .p5 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b5:target ~ .p6 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b5:target ~ .p7 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b5:target ~ .p8 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b5:target ~ .p9 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b5:target ~ .p1 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b5:target ~ .p2 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b5:target ~ .p3 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b5:target ~ .p4 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b4:target ~ .a3 {z-index:30;}
#b4:target ~ .p4 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b4:target ~ .p5 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b4:target ~ .p6 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b4:target ~ .p7 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b4:target ~ .p8 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b4:target ~ .p9 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b4:target ~ .p1 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b4:target ~ .p2 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b4:target ~ .p3 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b3:target ~ .a2 {z-index:30;}
#b3:target ~ .p3 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b3:target ~ .p4 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b3:target ~ .p5 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b3:target ~ .p6 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b3:target ~ .p7 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b3:target ~ .p8 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b3:target ~ .p9 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b3:target ~ .p1 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。