css3幻灯片换位效果

2020-01-27 14:18:07

字体：大中小

来源：转载

供稿：网友

CSS3技术实现的幻灯片效果，图片换位效果，点击某一张幻灯图片，这张图片就会换位，动画效果，测试时候注意，不要使用IE8。本效果兼容以下浏览器：火狐、Chrome、Safari等。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css3幻灯片换位效果</title><style type="text/css"> .flowGallery {width:810px; height:540px; position:relative; z-index:100;}.flowGallery input {position:absolute; left:-9999px;}.flow {padding:0; margin:0; list-style:none; width:810px; height:540px;}.flow li {width:150px; height:100px; position:absolute;}.flow li img {display:block; width:100%; height:100%;}.flow li.c1 {left:0; top:0;-webkit-transition:0.5s 0.05s;-moz-transition:0.5s 0.05s;-ms-transition:0.5s 0.05s;-o-transition:0.5s 0.05s;transition:0.5s 0.05s;}.flow li.c2 {left:165px; top:0;-webkit-transition:0.5s 0.1s;-moz-transition:0.5s 0.1s;-ms-transition:0.5s 0.1s;-o-transition:0.5s 0.1s;transition:0.5s 0.1s;}.flow li.c3 {left:330px; top:0;-webkit-transition:0.5s 0.15s;-moz-transition:0.5s 0.15s;-ms-transition:0.5s 0.15s;-o-transition:0.5s 0.15s;transition:0.5s 0.15s;}.flow li.c4 {left:495px; top:0;-webkit-transition:0.5s 0.2s;-moz-transition:0.5s 0.2s;-ms-transition:0.5s 0.2s;-o-transition:0.5s 0.2s;transition:0.5s 0.2s;}.flow li.c5 {left:660px; top:0;-webkit-transition:0.5s 0.25s;-moz-transition:0.5s 0.25s;-ms-transition:0.5s 0.25s;-o-transition:0.5s 0.25s;transition:0.5s 0.25s;}.flow li.c6 {left:0; top:110px;-webkit-transition:0.5s 0.3s;-moz-transition:0.5s 0.3s;-ms-transition:0.5s 0.3s;-o-transition:0.5s 0.3s;transition:0.5s 0.3s;}.flow li.c7 {left:165px; top:110px;-webkit-transition:0.5s 0.35s;-moz-transition:0.5s 0.35s;-ms-transition:0.5s 0.35s;-o-transition:0.5s 0.35s;transition:0.5s 0.35s;}.flow li.c8 {left:330px; top:110px;-webkit-transition:0.5s 0.4s;-moz-transition:0.5s 0.4s;-ms-transition:0.5s 0.4s;-o-transition:0.5s 0.4s;transition:0.5s 0.4s;}.flow li.c9 {left:495px; top:110px;-webkit-transition:0.5s 0.45s;-moz-transition:0.5s 0.45s;-ms-transition:0.5s 0.45s;-o-transition:0.5s 0.45s;transition:0.5s 0.45s;}.flow li.c10 {left:660px; top:110px;-webkit-transition:0.5s 0.5s;-moz-transition:0.5s 0.5s;-ms-transition:0.5s 0.5s;-o-transition:0.5s 0.5s;transition:0.5s 0.5s;}.flow li.c11 {left:0; top:220px;-webkit-transition:0.5s 0.45s;-moz-transition:0.5s 0.45s;-ms-transition:0.5s 0.45s;-o-transition:0.5s 0.45s;transition:0.5s 0.45s;}.flow li.c12 {left:165px; top:220px;-webkit-transition:0.5s 0.4s;-moz-transition:0.5s 0.4s;-ms-transition:0.5s 0.4s;-o-transition:0.5s 0.4s;transition:0.5s 0.4s;}.flow li.c13 {left:330px; top:220px;-webkit-transition:0.5s 0.35s;-moz-transition:0.5s 0.35s;-ms-transition:0.5s 0.35s;-o-transition:0.5s 0.35s;transition:0.5s 0.35s;}.flow li.c14 {left:495px; top:220px;-webkit-transition:0.5s 0.3s;-moz-transition:0.5s 0.3s;-ms-transition:0.5s 0.3s;-o-transition:0.5s 0.3s;transition:0.5s 0.3s;}.flow li.c15 {left:660px; top:220px;-webkit-transition:0.5s 0.25s;-moz-transition:0.5s 0.25s;-ms-transition:0.5s 0.25s;-o-transition:0.5s 0.25s;transition:0.5s 0.25s;}.flow li.c16 {left:0; top:330px;-webkit-transition:0.5s 0.2s;-moz-transition:0.5s 0.2s;-ms-transition:0.5s 0.2s;-o-transition:0.5s 0.2s;transition:0.5s 0.2s;}.flow li.c17 {left:165px; top:330px;-webkit-transition:0.5s 0.15s;-moz-transition:0.5s 0.15s;-ms-transition:0.5s 0.15s;-o-transition:0.5s 0.15s;transition:0.5s 0.15s;} #p1:checked ~ .flow li.c1 {left:0px; top:0px; width:480px; height:320px; z-index:-1;}#p1:checked ~ .flow li.c2 {left:495px; top:0px;}#p1:checked ~ .flow li.c3 {left:660px; top:0px;}#p1:checked ~ .flow li.c4 {left:495px; top:110px;}#p1:checked ~ .flow li.c5 {left:660px; top:110px;}#p1:checked ~ .flow li.c6 {left:495px; top:220px;}#p1:checked ~ .flow li.c7 {left:660px; top:220px;}#p1:checked ~ .flow li.c8 {left:0px; top:330px;}#p1:checked ~ .flow li.c9 {left:165px; top:330px;}#p1:checked ~ .flow li.c10 {left:330px; top:330px;}#p1:checked ~ .flow li.c11 {left:495px; top:330px;}#p1:checked ~ .flow li.c12 {left:660px; top:330px;}#p1:checked ~ .flow li.c13 {left:0px; top:440px;}#p1:checked ~ .flow li.c14 {left:165px; top:440px;}#p1:checked ~ .flow li.c15 {left:330px; top:440px;}#p1:checked ~ .flow li.c16 {left:495px; top:440px;}#p1:checked ~ .flow li.c17 {left:660px; top:440px;} #p2:checked ~ .flow li.c1 {left:0px; top:0px;}#p2:checked ~ .flow li.c2 {left:165px; top:0px; width:480px; height:320px; z-index:-1;}#p2:checked ~ .flow li.c3 {left:660px; top:0px;}#p2:checked ~ .flow li.c4 {left:0px; top:110px;}#p2:checked ~ .flow li.c5 {left:660px; top:110px;}#p2:checked ~ .flow li.c6 {left:0px; top:220px;}#p2:checked ~ .flow li.c7 {left:660px; top:220px;}#p2:checked ~ .flow li.c8 {left:0px; top:330px;}#p2:checked ~ .flow li.c9 {left:165px; top:330px;}#p2:checked ~ .flow li.c10 {left:330px; top:330px;}#p2:checked ~ .flow li.c11 {left:495px; top:330px;}#p2:checked ~ .flow li.c12 {left:660px; top:330px;}#p2:checked ~ .flow li.c13 {left:0px; top:440px;}#p2:checked ~ .flow li.c14 {left:165px; top:440px;}#p2:checked ~ .flow li.c15 {left:330px; top:440px;}#p2:checked ~ .flow li.c16 {left:495px; top:440px;}#p2:checked ~ .flow li.c17 {left:660px; top:440px;} #p3:checked ~ .flow li.c1 {left:0px; top:0px;}#p3:checked ~ .flow li.c2 {left:165px; top:0px;}#p3:checked ~ .flow li.c3 {left:330px; top:0px; width:480px; height:320px; z-index:-1;}#p3:checked ~ .flow li.c4 {left:0px; top:110px;}#p3:checked ~ .flow li.c5 {left:165px; top:110px;}#p3:checked ~ .flow li.c6 {left:0px; top:220px;}#p3:checked ~ .flow li.c7 {left:165px; top:220px;}#p3:checked ~ .flow li.c8 {left:0px; top:330px;}#p3:checked ~ .flow li.c9 {left:165px; top:330px;}#p3:checked ~ .flow li.c10 {left:330px; top:330px;}#p3:checked ~ .flow li.c11 {left:495px; top:330px;}#p3:checked ~ .flow li.c12 {left:660px; top:330px;}#p3:checked ~ .flow li.c13 {left:0px; top:440px;}#p3:checked ~ .flow li.c14 {left:165px; top:440px;}#p3:checked ~ .flow li.c15 {left:330px; top:440px;}#p3:checked ~ .flow li.c16 {left:495px; top:440px;}#p3:checked ~ .flow li.c17 {left:660px; top:440px;} #p4:checked ~ .flow li.c1 {left:495px; top:0px;}#p4:checked ~ .flow li.c2 {left:660px; top:0px;}#p4:checked ~ .flow li.c3 {left:495px; top:110px;}#p4:checked ~ .flow li.c4 {left:0px; top:0px; width:480px; height:320px; z-index:-1;}#p4:checked ~ .flow li.c5 {left:660px; top:110px;}#p4:checked ~ .flow li.c6 {left:495px; top:220px;}#p4:checked ~ .flow li.c7 {left:660px; top:220px;}#p4:checked ~ .flow li.c8 {left:0px; top:330px;}#p4:checked ~ .flow li.c9 {left:165px; top:330px;}#p4:checked ~ .flow li.c10 {left:330px; top:330px;}#p4:checked ~ .flow li.c11 {left:495px; top:330px;}#p4:checked ~ .flow li.c12 {left:660px; top:330px;}#p4:checked ~ .flow li.c13 {left:0px; top:440px;}#p4:checked ~ .flow li.c14 {left:165px; top:440px;}#p4:checked ~ .flow li.c15 {left:330px; top:440px;}#p4:checked ~ .flow li.c16 {left:495px; top:440px;}#p4:checked ~ .flow li.c17 {left:660px; top:440px;} #p5:checked ~ .flow li.c1 {left:0px; top:0px;}#p5:checked ~ .flow li.c2 {left:660px; top:0px;}#p5:checked ~ .flow li.c3 {left:0px; top:110px;}#p5:checked ~ .flow li.c4 {left:660px; top:110px;}#p5:checked ~ .flow li.c5 {left:165px; top:0px; width:480px; height:320px; z-index:-1;}#p5:checked ~ .flow li.c6 {left:0px; top:220px;}#p5:checked ~ .flow li.c7 {left:660px; top:220px;}#p5:checked ~ .flow li.c8 {left:0px; top:330px;}#p5:checked ~ .flow li.c9 {left:165px; top:330px;}#p5:checked ~ .flow li.c10 {left:330px; top:330px;}#p5:checked ~ .flow li.c11 {left:495px; top:330px;}#p5:checked ~ .flow li.c12 {left:660px; top:330px;}#p5:checked ~ .flow li.c13 {left:0px; top:440px;}#p5:checked ~ .flow li.c14 {left:165px; top:440px;}#p5:checked ~ .flow li.c15 {left:330px; top:440px;}#p5:checked ~ .flow li.c16 {left:495px; top:440px;}#p5:checked ~ .flow li.c17 {left:660px; top:440px;} #p6:checked ~ .flow li.c1 {left:0px; top:0px;}#p6:checked ~ .flow li.c2 {left:165px; top:0px;}#p6:checked ~ .flow li.c3 {left:0px; top:110px;}#p6:checked ~ .flow li.c4 {left:165px; top:110px;}#p6:checked ~ .flow li.c5 {left:0px; top:220px;}#p6:checked ~ .flow li.c6 {left:330px; top:0px; width:480px; height:320px; z-index:-1;}#p6:checked ~ .flow li.c7 {left:165px; top:220px;}#p6:checked ~ .flow li.c8 {left:0px; top:330px;}#p6:checked ~ .flow li.c9 {left:165px; top:330px;}#p6:checked ~ .flow li.c10 {left:330px; top:330px;}#p6:checked ~ .flow li.c11 {left:495px; top:330px;}#p6:checked ~ .flow li.c12 {left:660px; top:330px;}#p6:checked ~ .flow li.c13 {left:0px; top:440px;}#p6:checked ~ .flow li.c14 {left:165px; top:440px;}#p6:checked ~ .flow li.c15 {left:330px; top:440px;}#p6:checked ~ .flow li.c16 {left:495px; top:440px;}#p6:checked ~ .flow li.c17 {left:660px; top:440px;} #p7:checked ~ .flow li.c1 {left:0px; top:0px;}#p7:checked ~ .flow li.c2 {left:165px; top:0px;}#p7:checked ~ .flow li.c3 {left:330px; top:0px;}#p7:checked ~ .flow li.c4 {left:495px; top:0px;}#p7:checked ~ .flow li.c5 {left:660px; top:0px;}#p7:checked ~ .flow li.c6 {left:495px; top:110px;}#p7:checked ~ .flow li.c7 {left:0px; top:110px; width:480px; height:320px; z-index:-1;}#p7:checked ~ .flow li.c8 {left:660px; top:110px;}#p7:checked ~ .flow li.c9 {left:495px; top:220px;}#p7:checked ~ .flow li.c10 {left:660px; top:220px;}#p7:checked ~ .flow li.c11 {left:495px; top:330px;}#p7:checked ~ .flow li.c12 {left:660px; top:330px;}#p7:checked ~ .flow li.c13 {left:0px; top:440px;}#p7:checked ~ .flow li.c14 {left:165px; top:440px;}#p7:checked ~ .flow li.c15 {left:330px; top:440px;}#p7:checked ~ .flow li.c16 {left:495px; top:440px;}#p7:checked ~ .flow li.c17 {left:660px; top:440px;} #p8:checked ~ .flow li.c1 {left:0px; top:0px;}#p8:checked ~ .flow li.c2 {left:165px; top:0px;}#p8:checked ~ .flow li.c3 {left:330px; top:0px;}#p8:checked ~ .flow li.c4 {left:495px; top:0px;}#p8:checked ~ .flow li.c5 {left:660px; top:0px;}#p8:checked ~ .flow li.c6 {left:0px; top:110px;}#p8:checked ~ .flow li.c7 {left:660px; top:110px;}#p8:checked ~ .flow li.c8 {left:165px; top:110px; width:480px; height:320px; z-index:-1;}#p8:checked ~ .flow li.c9 {left:0px; top:220px;}#p8:checked ~ .flow li.c10 {left:660px; top:220px;}#p8:checked ~ .flow li.c11 {left:0px; top:330px;}#p8:checked ~ .flow li.c12 {left:660px; top:330px;}#p8:checked ~ .flow li.c13 {left:0px; top:440px;}#p8:checked ~ .flow li.c14 {left:165px; top:440px;}#p8:checked ~ .flow li.c15 {left:330px; top:440px;}#p8:checked ~ .flow li.c16 {left:495px; top:440px;}#p8:checked ~ .flow li.c17 {left:660px; top:440px;} #p9:checked ~ .flow li.c1 {left:0px; top:0px;}#p9:checked ~ .flow li.c2 {left:165px; top:0px;}#p9:checked ~ .flow li.c3 {left:330px; top:0px;}#p9:checked ~ .flow li.c4 {left:495px; top:0px;}#p9:checked ~ .flow li.c5 {left:660px; top:0px;}#p9:checked ~ .flow li.c6 {left:0px; top:110px;}#p9:checked ~ .flow li.c7 {left:165px; top:110px;}#p9:checked ~ .flow li.c8 {left:0px; top:220px;}#p9:checked ~ .flow li.c9 {left:330px; top:110px; width:480px; height:320px; z-index:-1;}#p9:checked ~ .flow li.c10 {left:165px; top:220px;}#p9:checked ~ .flow li.c11 {left:0px; top:330px;}#p9:checked ~ .flow li.c12 {left:165px; top:330px;}#p9:checked ~ .flow li.c13 {left:0px; top:440px;}#p9:checked ~ .flow li.c14 {left:165px; top:440px;}#p9:checked ~ .flow li.c15 {left:330px; top:440px;}#p9:checked ~ .flow li.c16 {left:495px; top:440px;}#p9:checked ~ .flow li.c17 {left:660px; top:440px;} #p10:checked ~ .flow li.c1 {left:0px; top:0px;}#p10:checked ~ .flow li.c2 {left:165px; top:0px;}#p10:checked ~ .flow li.c3 {left:330px; top:0px;}#p10:checked ~ .flow li.c4 {left:495px; top:0px;}#p10:checked ~ .flow li.c5 {left:660px; top:0px;}#p10:checked ~ .flow li.c6 {left:495px; top:110px;}#p10:checked ~ .flow li.c7 {left:660px; top:110px;}#p10:checked ~ .flow li.c8 {left:495px; top:220px;}#p10:checked ~ .flow li.c9 {left:660px; top:220px;}#p10:checked ~ .flow li.c10 {left:0px; top:110px; width:480px; height:320px; z-index:-1;}#p10:checked ~ .flow li.c11 {left:495px; top:330px;}#p10:checked ~ .flow li.c12 {left:660px; top:330px;}#p10:checked ~ .flow li.c13 {left:0px; top:440px;}#p10:checked ~ .flow li.c14 {left:165px; top:440px;}#p10:checked ~ .flow li.c15 {left:330px; top:440px;}#p10:checked ~ .flow li.c16 {left:495px; top:440px;}#p10:checked ~ .flow li.c17 {left:660px; top:440px;} #p11:checked ~ .flow li.c1 {left:0px; top:0px;}#p11:checked ~ .flow li.c2 {left:165px; top:0px;}#p11:checked ~ .flow li.c3 {left:330px; top:0px;}#p11:checked ~ .flow li.c4 {left:495px; top:0px;}#p11:checked ~ .flow li.c5 {left:660px; top:0px;}#p11:checked ~ .flow li.c6 {left:0px; top:110px;}#p11:checked ~ .flow li.c7 {left:660px; top:110px;}#p11:checked ~ .flow li.c8 {left:0px; top:220px;}#p11:checked ~ .flow li.c9 {left:660px; top:220px;}#p11:checked ~ .flow li.c10 {left:0px; top:330px;}#p11:checked ~ .flow li.c11 {left:165px; top:110px; width:480px; height:320px; z-index:-1;}#p11:checked ~ .flow li.c12 {left:660px; top:330px;}#p11:checked ~ .flow li.c13 {left:0px; top:440px;}#p11:checked ~ .flow li.c14 {left:165px; top:440px;}#p11:checked ~ .flow li.c15 {left:330px; top:440px;}#p11:checked ~ .flow li.c16 {left:495px; top:440px;}#p11:checked ~ .flow li.c17 {left:660px; top:440px;} #p12:checked ~ .flow li.c1 {left:0px; top:0px;}#p12:checked ~ .flow li.c2 {left:165px; top:0px;}#p12:checked ~ .flow li.c3 {left:330px; top:0px;}#p12:checked ~ .flow li.c4 {left:495px; top:0px;}#p12:checked ~ .flow li.c5 {left:660px; top:0px;}#p12:checked ~ .flow li.c6 {left:0px; top:110px;}#p12:checked ~ .flow li.c7 {left:165px; top:110px;}#p12:checked ~ .flow li.c8 {left:0px; top:220px;}#p12:checked ~ .flow li.c9 {left:165px; top:220px;}#p12:checked ~ .flow li.c10 {left:0px; top:330px;}#p12:checked ~ .flow li.c11 {left:165px; top:330px;}#p12:checked ~ .flow li.c12 {left:330px; top:110px; width:480px; height:320px; z-index:-1;}#p12:checked ~ .flow li.c13 {left:0px; top:440px;}#p12:checked ~ .flow li.c14 {left:165px; top:440px;}#p12:checked ~ .flow li.c15 {left:330px; top:440px;}#p12:checked ~ .flow li.c16 {left:495px; top:440px;}#p12:checked ~ .flow li.c17 {left:660px; top:440px;} #p13:checked ~ .flow li.c1 {left:0px; top:0px;}#p13:checked ~ .flow li.c2 {left:165px; top:0px;}#p13:checked ~ .flow li.c3 {left:330px; top:0px;}#p13:checked ~ .flow li.c4 {left:495px; top:0px;}#p13:checked ~ .flow li.c5 {left:660px; top:0px;}#p13:checked ~ .flow li.c6 {left:0px; top:110px;}#p13:checked ~ .flow li.c7 {left:165px; top:110px;}#p13:checked ~ .flow li.c8 {left:330px; top:110px;}#p13:checked ~ .flow li.c9 {left:495px; top:110px;}#p13:checked ~ .flow li.c10 {left:660px; top:110px;}#p13:checked ~ .flow li.c11 {left:495px; top:220px;}#p13:checked ~ .flow li.c12 {left:660px; top:220px;}#p13:checked ~ .flow li.c13 {left:0px; top:220px; width:480px; height:320px; z-index:-1;}#p13:checked ~ .flow li.c14 {left:495px; top:330px;}#p13:checked ~ .flow li.c15 {left:660px; top:330px;}#p13:checked ~ .flow li.c16 {left:495px; top:440px;}#p13:checked ~ .flow li.c17 {left:660px; top:440px;} #p14:checked ~ .flow li.c1 {left:0px; top:0px;}#p14:checked ~ .flow li.c2 {left:165px; top:0px;}#p14:checked ~ .flow li.c3 {left:330px; top:0px;}#p14:checked ~ .flow li.c4 {left:495px; top:0px;}#p14:checked ~ .flow li.c5 {left:660px; top:0px;}#p14:checked ~ .flow li.c6 {left:0px; top:110px;}#p14:checked ~ .flow li.c7 {left:165px; top:110px;}#p14:checked ~ .flow li.c8 {left:330px; top:110px;}#p14:checked ~ .flow li.c9 {left:495px; top:110px;}#p14:checked ~ .flow li.c10 {left:660px; top:110px;}#p14:checked ~ .flow li.c11 {left:0px; top:220px;}#p14:checked ~ .flow li.c12 {left:660px; top:220px;}#p14:checked ~ .flow li.c13 {left:0px; top:330px;}#p14:checked ~ .flow li.c14 {left:165px; top:220px; width:480px; height:320px; z-index:-1;}#p14:checked ~ .flow li.c15 {left:660px; top:330px;}#p14:checked ~ .flow li.c16 {left:0px; top:440px;}#p14:checked ~ .flow li.c17 {left:660px; top:440px;} #p15:checked ~ .flow li.c1 {left:0px; top:0px;}#p15:checked ~ .flow li.c2 {left:165px; top:0px;}#p15:checked ~ .flow li.c3 {left:330px; top:0px;}#p15:checked ~ .flow li.c4 {left:495px; top:0px;}#p15:checked ~ .flow li.c5 {left:660px; top:0px;}#p15:checked ~ .flow li.c6 {left:0px; top:110px;}#p15:checked ~ .flow li.c7 {left:165px; top:110px;}#p15:checked ~ .flow li.c8 {left:330px; top:110px;}#p15:checked ~ .flow li.c9 {left:495px; top:110px;}#p15:checked ~ .flow li.c10 {left:660px; top:110px;}#p15:checked ~ .flow li.c11 {left:0px; top:220px;}#p15:checked ~ .flow li.c12 {left:165px; top:220px;}#p15:checked ~ .flow li.c13 {left:0px; top:330px;}#p15:checked ~ .flow li.c14 {left:165px; top:330px;}#p15:checked ~ .flow li.c15 {left:330px; top:220px; width:480px; height:320px; z-index:-1;}#p15:checked ~ .flow li.c16 {left:0px; top:440px;}#p15:checked ~ .flow li.c17 {left:165px; top:440px;} #p16:checked ~ .flow li.c1 {left:0px; top:0px;}#p16:checked ~ .flow li.c2 {left:165px; top:0px;}#p16:checked ~ .flow li.c3 {left:330px; top:0px;}#p16:checked ~ .flow li.c4 {left:495px; top:0px;}#p16:checked ~ .flow li.c5 {left:660px; top:0px;}#p16:checked ~ .flow li.c6 {left:0px; top:110px;}#p16:checked ~ .flow li.c7 {left:165px; top:110px;}#p16:checked ~ .flow li.c8 {left:330px; top:110px;}#p16:checked ~ .flow li.c9 {left:495px; top:110px;}#p16:checked ~ .flow li.c10 {left:660px; top:110px;}#p16:checked ~ .flow li.c11 {left:0px; top:220px;}#p16:checked ~ .flow li.c12 {left:660px; top:220px;}#p16:checked ~ .flow li.c13 {left:0px; top:330px;}#p16:checked ~ .flow li.c14 {left:660px; top:330px;}#p16:checked ~ .flow li.c15 {left:0px; top:440px;}#p16:checked ~ .flow li.c16 {left:165px; top:220px; width:480px; height:320px; z-index:-1;}#p16:checked ~ .flow li.c17 {left:660px; top:440px;} #p17:checked ~ .flow li.c1 {left:0px; top:0px;}#p17:checked ~ .flow li.c2 {left:165px; top:0px;}#p17:checked ~ .flow li.c3 {left:330px; top:0px;}#p17:checked ~ .flow li.c4 {left:495px; top:0px;}#p17:checked ~ .flow li.c5 {left:660px; top:0px;}#p17:checked ~ .flow li.c6 {left:0px; top:110px;}#p17:checked ~ .flow li.c7 {left:165px; top:110px;}#p17:checked ~ .flow li.c8 {left:330px; top:110px;}#p17:checked ~ .flow li.c9 {left:495px; top:110px;}#p17:checked ~ .flow li.c10 {left:660px; top:110px;}#p17:checked ~ .flow li.c11 {left:0px; top:220px;}#p17:checked ~ .flow li.c12 {left:165px; top:220px;}#p17:checked ~ .flow li.c13 {left:0px; top:330px;}#p17:checked ~ .flow li.c14 {left:165px; top:330px;}#p17:checked ~ .flow li.c15 {left:0px; top:440px;}#p17:checked ~ .flow li.c16 {left:165px; top:440px;}#p17:checked ~ .flow li.c17 {left:330px; top:220px; width:480px; height:320px; z-index:-1;}</style></head><body><div id="content">	<div id="info4">		<div class="flowGallery">			<input type="radio" name="flow" id="p1" checked="checked">			<input type="radio" name="flow" id="p2">			<input type="radio" name="flow" id="p3">			<input type="radio" name="flow" id="p4">			<input type="radio" name="flow" id="p5">			<input type="radio" name="flow" id="p6">			<input type="radio" name="flow" id="p7">			<input type="radio" name="flow" id="p8">			<input type="radio" name="flow" id="p9">			<input type="radio" name="flow" id="p10">			<input type="radio" name="flow" id="p11">			<input type="radio" name="flow" id="p12">			<input type="radio" name="flow" id="p13">			<input type="radio" name="flow" id="p14">			<input type="radio" name="flow" id="p15">			<input type="radio" name="flow" id="p16">			<input type="radio" name="flow" id="p17">			<ul class="flow">				<li class="c1"><label for="p1"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c2"><label for="p2"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c3"><label for="p3"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c4"><label for="p4"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c5"><label for="p5"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c6"><label for="p6"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c7"><label for="p7"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c8"><label for="p8"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c9"><label for="p9"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c10"><label for="p10"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c11"><label for="p11"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c12"><label for="p12"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c13"><label for="p13"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c14"><label for="p14"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c15"><label for="p15"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c16"><label for="p16"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>				<li class="c17"><label for="p17"><img src="/d/file/p/2020/01-27/3e4f46fb5da327bb880242a09a14dc9b.jpg" alt=""></label></li>			</ul>		</div>	</div> 	<br class="clear"></div></body></html>

上一篇：CSS3文字动画，文字滚动，文字渐变特效

下一篇：CSS3绘制砖墙-没有用任何图片