css3 slide transposition effect_html/css_WEB-ITnose-HTML Tutorial-php.cn

css3幻灯片换位效果 .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;} http://www.999jiujiu.com/