<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幻灯片换位效果的更多相关文章

  1. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  2. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  4. html+css3实现长方体效果

    网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 h ...

  5. Css3实现波浪效果3-静态波纹

    一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...

  6. 测试css3的动画效果在display:none的时候不耗费性能

    也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...

  7. 自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果（按轨迹移动）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. css3写下雨效果

    css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...

  9. 利用css3的多背景图属性实现幻灯片切换效果

    css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...

随机推荐

  1. 忘记linux密码

    http://blog.163.com/xygzlyq@126/blog/static/22585899200810471512530/

  2. 【第一篇章-android平台buffer播放探索】native media

    在android平台,从4.0开始,提出了openmax架构,所以在DNK的R7版本中有了openmax AL层播放的DEMO即native media,这个DEMO就是读本地文件,然后把所读buff ...

  3. Qt入门学习——Qt 5 帮助文档的使用

    Qt入门学习——Qt 5 帮助文档的使用 学习图形界面开发,肯定离不开帮助文档的使用,因为它不像 C 语言那样就那么几个函数接口,图形接口的接口可以用海量来形容,常用的我们可能能记住,其它的真的没有必 ...

  4. 消除“Permission is only granted to system apps”错误

    遇见这个问题我百度搜了一大堆说是须要clean项目,可是我每次clean项目的时候我的R文件总是丢失. 如今我给大家介绍一下避免授予系统权限报错更改方法 在AndroidManifest.xml中使用 ...

  5. [android开发IDE]adt-bundle-windows-x86的一个bug：无法解析.rs文件--------rs_core.rsh file not found

    google的android自带的apps写的是相当牛逼的,将其导入到eclipse中方便我们学习扩展.可惜关于导入的资料太少了,尤其是4.1之后的gallery和camera合二为一了.之前导4.0 ...

  6. java web从零单排第十七期《struts2》数据标签库(1)

    1.s:action标签: 此标签的作用是在JSP页面中访问action类的数据,执行某些操作,并返回相应的数据.其属性及意义如下: 属性名 是否必需 默认值 类型 说明介绍 executeResul ...

  7. [原理][来源解析]spring于@Transactional,Propagation.SUPPORTS,以及 Hibernate Session,以及jdbc Connection关联

    Spring 捆绑Hibernate. 夹: 一.  1. Spring 怎样处理propagation=Propagation.SUPPORTS? 2. Spring 何时生成HibernateSe ...

  8. SecureCRT 绝佳配色方案, 保护你的眼睛（转发）

    SecureCRT 绝佳配色方案, 保护你的眼睛 关键词:SecureCRT配色, SecureCRT设置颜色, Linux终端配色,Linux终端颜色设置. 终端有一个好的配色,不仅能保护自己的眼睛 ...

  9. Sizzle之tokenize

    在Sizzle里,大体思路,当为复合选择器时,判断是否支持querySeletorAll,如果不支持则调用自写方法select. select的功能十分冗长,下面先分析tokenize 在tokeni ...

  10. div内嵌p,div等块元素出现的问题

    div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素,比如p,div,设置外间距(margin)的话会怎样.本来还纳闷 ...