CSS3做的幻灯片特效

2024-09-05 12:17:22

字体：大中小

来源：转载

供稿：网友

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>										<img class="p1" src="/d/file/p/2024/09-05/14e51b85d79722b97613b891ad92dd48.jpg" alt="">	<img class="p2" src="/d/file/p/2024/09-05/70a3206bf4d47539f8168cbe183b77b7.jpg" alt="">	<img class="p3" src="/d/file/p/2024/09-05/060fe1cfb5b26a35176e7740cffdf375.jpg" alt="">	<img class="p4" src="/d/file/p/2024/09-05/07083dfd80228128bc1c98fc0c078f67.jpg" alt="">	<img class="p5" src="/d/file/p/2024/09-05/8367c3bb28f8590c32f141085af2bb2a.jpg" alt="">	<img class="p6" src="/d/file/p/2024/09-05/29f8deca246ee32f94a056c7db46a394.jpg" alt="">	<img class="p7" src="/d/file/p/2024/09-05/027089a01209e116a9648e3874bf0ce0.jpg" alt="">	<img class="p8" src="/d/file/p/2024/09-05/0a99157be3aa79c01bb42dc728966fe0.jpg" alt="">	<img class="p9" src="/d/file/p/2024/09-05/0b000d14f3b851c07c14b9feb61d4674.jpg" alt=""></div></body></html>

上一篇：HTML5 canvas 跑动的小人

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