css3幻灯片换位效果
<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>
css3幻灯片换位效果的更多相关文章
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 第八十节,CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 ...
- html+css3实现长方体效果
网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看. 2017-07-25 21:30:23 h ...
- Css3实现波浪效果3-静态波纹
一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...
- 测试css3的动画效果在display:none的时候不耗费性能
也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...
- 自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果(按轨迹移动)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css3写下雨效果
css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...
- 利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
随机推荐
- 如何使用VC++6.0发布程序(即release版本程序)
大家都知道VC编译器默认生成debug版本的程序,但是debug版本程序无法运行在没有安装VC的电脑上, 这就要就我们生成release版本的程序,因为release版本在未安装VC的电脑上也能运行( ...
- CC++初学者编程教程(11) 配置Windows数据库服务器
1.我们新建一个虚拟机. 2. 选择默认的WorkStation10.0. 3.我们选择VS2012的镜像. 4.我们设置用户密码,跳过WindowsSever2012密钥 5.我们选择是,稍后手动激 ...
- C语言入门(15)——结构体与数据抽象
大多数的计算机运算是对现实世界的模拟,如果想用计算机来模拟现实世界需要用到数据抽象的方法.所谓抽象是从实际的人.物.事和概念中抽取所关心的共同特征,,忽略非本质的细节,吧这些特征用各种概念精确的加以描 ...
- SELinux开关导致mysql服务启动不了
http://www.jb51.net/article/36187.htm 网站突然连接不上数据库,于是朋友直接重启了一下服务器.进到cli模式下,执行 service myqsld start 发现 ...
- UITableViewCell性能优化
5.UITableViewCell性能优化 > 定义一个循环利用标识 static NSString *ID = @"C1"; > 从缓存池中取出可循环利用的cell ...
- cdoj 排名表 拓扑排序 排名输出 贪心
//并不理解为什么需要反向建图,由大到小倒序确定排名.感觉正向由小到大和反向由大到小应该是一样的. 解:拓排+贪心,反向建边,先找排名靠后的(now,不知道为什么) #include<cstdi ...
- ssh 应用
SSH反向连接及Autossh ssh 隧道: http://www.cnblogs.com/robinyjj/archive/2008/11/02/1325018.html This guy wri ...
- libiconv的静态编译
./configure --enable-static=yes --prefix=/usr/local/libiconv CentOS安装transmission » Nicky Blog 安装l ...
- Linux学习之十六、文件的格式化与相关处理
原文地址:http://vbird.dic.ksu.edu.tw/linux_basic/0330regularex_4.php 文件的格式化与相关处理 接下来让我们来将文件进行一些简单的编排吧!底下 ...
- [置顶] 【IOS】IOS7 UI适配
昨天下了把手机升级成了IOS7 正式版,然后下了最新的xocde5. 试着编译了一下刚刚完成的几个应用,还好问题不大,半个小时的时间都适配好了,然后改了下几个新出现的warning.过几天等空了,要 ...