CSS3做的幻灯片特效

2020-01-27 14:16:45

字体：大中小

来源：转载

供稿：网友

CSS3做的幻灯片特效，主要是使用CSS3的target伪类，它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个”#”字符，然后后面带有一个标志符名称，比如#b1，target就是用来匹配ID为b1的元素的。

<!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.7; z-index:8;}#b3:target ~ .p2 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}#b2:target ~ .a1 {z-index:30;}#b2:target ~ .p2 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}#b2:target ~ .p3 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}#b2:target ~ .p4 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}#b2:target ~ .p5 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}#b2:target ~ .p6 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}#b2:target ~ .p7 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}#b2:target ~ .p8 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}#b2:target ~ .p9 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}#b2:target ~ .p1 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}#b1:target ~ .a9 {z-index:30;}#b1:target ~ .p1 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}#b1:target ~ .p2 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}#b1:target ~ .p3 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}#b1:target ~ .p4 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}#b1:target ~ .p5 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}#b1:target ~ .p6 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}#b1:target ~ .p7 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}#b1:target ~ .p8 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}#b1:target ~ .p9 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}</style></head><body><section class="tips">target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个”#”字符，然后后面带有一个标志符名称，比如#b1，target就是用来匹配ID为b1的元素的。	qq群:197326136<br></section><div class="cssplayStack">	<b id="b1"></b>	<b id="b2"></b>	<b id="b3"></b>	<b id="b4"></b>	<b id="b5"></b>	<b id="b6"></b>	<b id="b7"></b>	<b id="b8"></b>	<b id="b9"></b>	<a class="a1" href="#b1"></a>	<a class="a2" href="#b2"></a>	<a class="a3" href="#b3"></a>	<a class="a4" href="#b4"></a>	<a class="a5" href="#b5"></a>	<a class="a6" href="#b6"></a>	<a class="a7" href="#b7"></a>	<a class="a8" href="#b8"></a>	<a class="a9" href="#b9"></a>	<img class="p1" src="/d/file/p/2020/01-27/2a749d380c5b9cc41f77ffb16fb1ccf0.jpg" alt="">	<img class="p2" src="/d/file/p/2020/01-27/24ab674506d007972e4980486370e4b5.jpg" alt="">	<img class="p3" src="/d/file/p/2020/01-27/6efa8ba4dd55da1915eb9441f222470b.jpg" alt="">	<img class="p4" src="/d/file/p/2020/01-27/53bf738d76970e4e4ca45fb2f3d5fa70.jpg" alt="">	<img class="p5" src="/d/file/p/2020/01-27/aaa3a15f4135ff6d155ffc7acd6bfbca.jpg" alt="">	<img class="p6" src="/d/file/p/2020/01-27/f7cb9a3863b22f29d9ff3d136f99c95b.jpg" alt="">	<img class="p7" src="/d/file/p/2020/01-27/fc807b7b6d258bf14b15b2422d949dda.jpg" alt="">	<img class="p8" src="/d/file/p/2020/01-27/4012430d4b2b6ee863b6485c2d2c8ce2.jpg" alt="">	<img class="p9" src="/d/file/p/2020/01-27/0495a8dfecf2698f411716323c4b43cc.jpg" alt=""></div></body></html>

上一篇：css3的transition模仿Js的放大镜效果

下一篇：HTML5 canvas 跑动的小人