css3 スライド移調効果_html/css_WEB-ITnose

css3幻灯片换位效果 .flowGallery {幅:810px;高さ:540ピクセル;位置:相対; z-index:100;} .flowGallery 入力 {位置:絶対;左:-9999px;} .flow {パディング:0;マージン:0;リストスタイル:なし;幅:810ピクセル;高さ:540px;} .flow li {幅:150px;高さ:100ピクセル;位置:絶対;} .flow li img {表示:ブロック;幅:100%;高さ:100%;} .flow li.c1 {左:0;トップ: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 {左:165px;トップ: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 {左:330px;トップ: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 {左:495px;トップ: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 {左:660px;トップ: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 {左: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 {左:165px;トップ: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 {左: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 {左:495px;トップ: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 {左: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 {左:0;トップ: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 {左: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 {左:330px;トップ: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 {左: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 {左:660px;トップ: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 {左:0;トップ: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 {左:165px;トップ: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;上:0px;幅:480ピクセル;高さ:320ピクセル; 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;上:330px;} #p1:checked ~ .flow li.c9 {左:165px;上:330px;} #p1:チェック済み ~ .flow li.c10 {左:330px;上:330px;} #p1:チェック済み ~ .flow li.c11 {左:495px;上:330px;} #p1:チェック済み ~ .flow li.c12 {左:660px; top:330px;} #p1:checked ~ .flow li.c13 {left:0px;上:440px;} #p1:checked ~ .flow li.c14 {左:165px;上:440px;} #p1:checked ~ .flow li.c15 {左:330px;上:440px;} #p1:チェック済み ~ .flow li.c16 {左:495px;上:440px;} #p1:checked ~ .flow li.c17 {左:660px;トップ:440px;}

#p2:チェック済み ~ .flow li.c1 {left:0px; top:0px;} #p2:checked ~ .flow li.c2 {left:165px;上:0px;幅:480ピクセル;高さ:320ピクセル; 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;上:330px;} #p2:checked ~ .flow li.c9 {左:165px;上:330px;} #p2:checked ~ .flow li.c10 {左:330px;上:330px;} #p2:チェック済み ~ .flow li.c11 {左:495px;上:330px;} #p2:checked ~ .flow li.c12 {左:660px; top:330px;} #p2:checked ~ .flow li.c13 {left:0px;上:440px;} #p2:checked ~ .flow li.c14 {左:165px;上:440px;} #p2:checked ~ .flow li.c15 {左:330px;上:440px;} #p2:checked ~ .flow li.c16 {左:495px;上:440px;} #p2:checked ~ .flow li.c17 {左: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;上:0px;幅:480ピクセル;高さ:320ピクセル; 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;上:330px;} #p3:チェック済み ~ .flow li.c11 {左:495px;上:330px;} #p3:チェック済み ~ .flow li.c12 {左:660px; top:330px;} #p3:checked ~ .flow li.c13 {left:0px;上:440px;} #p3:チェック済み ~ .flow li.c14 {左:165px;上:440px;} #p3:チェック済み ~ .flow li.c15 {左:330px;上:440px;} #p3:チェック済み ~ .flow li.c16 {左:495px;上:440px;} #p3:チェック済み ~ .flow li.c17 {左:660px;上:440px;}

#p4:checked ~ .flow li.c1 {左: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;上:0px;幅:480ピクセル;高さ:320ピクセル; 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;上:330px;} #p4:checked ~ .flow li.c9 {左:165px; top:330px;} #p4:checked ~ .flow li.c10 {left:330px;上:330px;} #p4:チェック済み ~ .flow li.c11 {左:495px;上:330px;} #p4:チェック済み ~ .flow li.c12 {左:660px; top:330px;} #p4:checked ~ .flow li.c13 {left:0px;上:440px;} #p4:チェック済み ~ .flow li.c14 {左:165px;上:440px;} #p4:checked ~ .flow li.c15 {左:330px;上:440px;} #p4:チェック済み ~ .flow li.c16 {左:495px;上:440px;} #p4:checked ~ .flow li.c17 {左: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;上:0px;幅:480ピクセル;高さ:320ピクセル; 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;上:330px;} #p5:チェック済み ~ .flow li.c10 {左:330px;上:330px;} #p5:チェック済み ~ .flow li.c11 {左:495px;上:330px;} #p5:チェック済み ~ .flow li.c12 {左:660px; top:330px;} #p5:checked ~ .flow li.c13 {left:0px;上:440px;} #p5:チェック済み ~ .flow li.c14 {左:165px;上:440px;} #p5:チェック済み ~ .flow li.c15 {左:330px;上:440px;} #p5:チェック済み ~ .flow li.c16 {左:495px;上:440px;} #p5:チェック済み ~ .flow li.c17 {左: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;上:0px;幅:480ピクセル;高さ:320ピクセル; 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;上:330px;} #p6:チェック済み ~ .flow li.c10 {左:330px;上:330px;} #p6:チェック済み ~ .flow li.c11 {左:495px;上:330px;} #p6:チェック済み ~ .flow li.c12 {左:660px; top:330px;} #p6:checked ~ .flow li.c13 {left:0px;上:440px;} #p6:チェック済み ~ .flow li.c14 {左:165px;上:440px;} #p6:チェック済み ~ .flow li.c15 {左:330px;上:440px;} #p6:チェック済み ~ .flow li.c16 {左:495px;上:440px;} #p6:チェック済み ~ .flow li.c17 {左:660px;トップ:440px;}

#p7:チェック済み ~ .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;上:110ピクセル;幅:480ピクセル;高さ:320ピクセル; z-index:-1;} #p7:checked ~ .flow li.c8 {left:660px; top:110px;} #p7:checked ~ .flow li.c9 {left:495px;上:220px;} #p7:チェック済み ~ .flow li.c10 {左:660px;上:220px;} #p7:チェック済み ~ .flow li.c11 {左:495px;上:330px;} #p7:チェック済み ~ .flow li.c12 {左:660px; top:330px;} #p7:checked ~ .flow li.c13 {left:0px;上:440px;} #p7:チェック済み ~ .flow li.c14 {左:165px;上:440px;} #p7:チェック済み ~ .flow li.c15 {左:330px;上:440px;} #p7:チェック済み ~ .flow li.c16 {左:495px;上:440px;} #p7:チェック済み ~ .flow li.c17 {左: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;上:110ピクセル;幅:480ピクセル;高さ:320ピクセル; 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;上:330px;} #p8:チェック済み ~ .flow li.c12 {左:660px; top:330px;} #p8:checked ~ .flow li.c13 {left:0px;上:440px;} #p8:チェック済み ~ .flow li.c14 {左:165px;上:440px;} #p8:チェック済み ~ .flow li.c15 {左:330px;上:440px;} #p8:チェック済み ~ .flow li.c16 {左:495px;上:440px;} #p8:チェック済み ~ .flow li.c17 {左: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;上:110ピクセル;幅:480ピクセル;高さ:320ピクセル; z-index:-1;} #p9:checked ~ .flow li.c10 {left:165px; top:220px;} #p9:checked ~ .flow li.c11 {left:0px;上:330px;} #p9:チェック済み ~ .flow li.c12 {左:165px; top:330px;} #p9:checked ~ .flow li.c13 {left:0px;上:440px;} #p9:チェック済み ~ .flow li.c14 {左:165px;上:440px;} #p9:チェック済み ~ .flow li.c15 {左:330px;上:440px;} #p9:チェック済み ~ .flow li.c16 {左:495px;上:440px;} #p9:checked ~ .flow li.c17 {左: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;上:110ピクセル;幅:480ピクセル;高さ:320ピクセル; z-index:-1;} #p10:checked ~ .flow li.c11 {left:495px;上:330px;} #p10:チェック済み ~ .flow li.c12 {左:660px; top:330px;} #p10:checked ~ .flow li.c13 {left:0px;上:440px;} #p10:チェック済み ~ .flow li.c14 {左:165px;上:440px;} #p10:チェック済み ~ .flow li.c15 {左:330px;上:440px;} #p10:チェック済み ~ .flow li.c16 {左:495px;上:440px;} #p10:チェック済み ~ .flow li.c17 {左: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;上:330px;} #p11:チェック済み ~ .flow li.c11 {左:165px;上:110ピクセル;幅:480ピクセル;高さ:320ピクセル; z-index:-1;} #p11:checked ~ .flow li.c12 {left:660px; top:330px;} #p11:checked ~ .flow li.c13 {left:0px;上:440px;} #p11:チェック済み ~ .flow li.c14 {左:165px;上:440px;} #p11:チェック済み ~ .flow li.c15 {左:330px;上:440px;} #p11:チェック済み ~ .flow li.c16 {左:495px;上:440px;} #p11:チェック済み ~ .flow li.c17 {左:660px;トップ:440px;}

#p12:チェック済み ~ .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;上:330px;} #p12:チェック済み ~ .flow li.c11 {左:165px;上:330px;} #p12:チェック済み ~ .flow li.c12 {左:330px;上:110ピクセル;幅:480ピクセル;高さ:320ピクセル; z-index:-1;} #p12:checked ~ .flow li.c13 {left:0px;上:440px;} #p12:チェック済み ~ .flow li.c14 {左:165px;上:440px;} #p12:チェック済み ~ .flow li.c15 {左:330px;上:440px;} #p12:チェック済み ~ .flow li.c16 {左:495px;上:440px;} #p12:チェック済み ~ .flow li.c17 {左: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;上:220px;} #p13:チェック済み ~ .flow li.c12 {左:660px; top:220px;} #p13:checked ~ .flow li.c13 {left:0px;上:220ピクセル;幅:480ピクセル;高さ:320ピクセル; z-index:-1;} #p13:checked ~ .flow li.c14 {left:495px;上:330px;} #p13:チェック済み ~ .flow li.c15 {左:660px;上:330px;} #p13:チェック済み ~ .flow li.c16 {左:495px;上:440px;} #p13:チェック済み ~ .flow li.c17 {左: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;上:220px;} #p14:チェック済み ~ .flow li.c12 {左:660px; top:220px;} #p14:checked ~ .flow li.c13 {left:0px;上:330px;} #p14:チェック済み ~ .flow li.c14 {左:165px;上:220ピクセル;幅:480ピクセル;高さ:320ピクセル; z-index:-1;} #p14:checked ~ .flow li.c15 {left:660px; top:330px;} #p14:checked ~ .flow li.c16 {left:0px;上:440px;} #p14:チェック済み ~ .flow li.c17 {左: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;上:220px;} #p15:チェック済み ~ .flow li.c12 {左:165px; top:220px;} #p15:checked ~ .flow li.c13 {left:0px;上:330px;} #p15:チェック済み ~ .flow li.c14 {左:165px;上:330px;} #p15:チェック済み ~ .flow li.c15 {左:330px;上:220ピクセル;幅:480ピクセル;高さ:320ピクセル; z-index:-1;} #p15:checked ~ .flow li.c16 {left:0px;上:440px;} #p15:チェック済み ~ .flow li.c17 {左: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;上:220px;} #p16:チェック済み ~ .flow li.c12 {左:660px; top:220px;} #p16:checked ~ .flow li.c13 {left:0px;上:330px;} #p16:チェック済み ~ .flow li.c14 {左:660px; top:330px;} #p16:checked ~ .flow li.c15 {left:0px;上:440px;} #p16:チェック済み ~ .flow li.c16 {左:165px;上:220ピクセル;幅:480ピクセル;高さ:320ピクセル; z インデックス:-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/

css3 スライド移調効果_html/css_WEB-ITnose

関連記事