css3幻灯片换位效果
来源:互联网 发布:python游戏开发源码 编辑:程序博客网 时间:2024/06/07 13:14
<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><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<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="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c2"><label for="p2"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c3"><label for="p3"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c4"><label for="p4"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c5"><label for="p5"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c6"><label for="p6"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c7"><label for="p7"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c8"><label for="p8"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c9"><label for="p9"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c10"><label for="p10"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c11"><label for="p11"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c12"><label for="p12"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c13"><label for="p13"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c14"><label for="p14"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c15"><label for="p15"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c16"><label for="p16"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c17"><label for="p17"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
</ul>
</div>
</div> <!-- end info -->
<br class="clear">
</div>
</body>
</html>
<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><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<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="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c2"><label for="p2"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c3"><label for="p3"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c4"><label for="p4"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c5"><label for="p5"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c6"><label for="p6"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c7"><label for="p7"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c8"><label for="p8"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c9"><label for="p9"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c10"><label for="p10"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c11"><label for="p11"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c12"><label for="p12"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c13"><label for="p13"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c14"><label for="p14"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c15"><label for="p15"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c16"><label for="p16"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
<li class="c17"><label for="p17"><img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" alt=""></label></li>
</ul>
</div>
</div> <!-- end info -->
<br class="clear">
</div>
</body>
</html>
0 0
- css3幻灯片换位效果
- css3实现幻灯片效果
- CSS3 幻灯片
- 用css3动画制作幻灯片效果实现不了的问题
- 幻灯片效果
- 幻灯片效果
- css3做幻灯片3
- css3做幻灯片2
- css3透明幻灯片切换
- 文字幻灯片交替效果
- javascript版幻灯片效果
- JavaScript版幻灯片效果
- JavaScript幻灯片效果
- 随机幻灯片图片效果
- javascript实现幻灯片效果
- 幻灯片效果 防新浪
- 图片幻灯片效果
- 幻灯片播放效果--Jquery
- 《数学之美(第二版)》(一)
- axi 4 lite interface description
- 黑马程序员-OC语言-函数和对象方法的区别(听课笔记)
- Windows Mobile 6.0 SDK和中文模拟器下载
- Apache虚拟主机设置
- css3幻灯片换位效果
- 微信支付:向项目添加WeChatSDK步骤
- 解决在管理wordpress时权限不足的问题
- 关于objective—c如何让JPG文件转化成PDF形式
- python 2.7 + pip + Django 安装
- 项目自动化发布与部署
- require(),include(),require_once()和include_once()区别
- ios之点语法
- DB Cache Reloaded Fix缓存不能被激活解决方法