css怎么隔开图片上下行,CSS3 图片中间分割动效

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

overflow: hidden;

}

body {

background-color: #222;

font: 75% "Helvetica", Arial, sans-serif;

}

input[type="checkbox"] {

background: rgba(255, 255, 255, .1);

border-radius: 100%;

border: 0;

cursor: pointer;

text-align: center;

position: absolute;

top: 30px;

left: 50%;

margin-left: -20px;

width: 40px;

height: 40px;

appearance: none;

outline: 0;

transition: all 0.4s ease-in-out;

z-index: 10;

}

input[type="checkbox"]:hover {

background: #b40000;

}

input[type="checkbox"]:after {

color: #fff;

content: '+';

font-size: 2em;

line-height: 41px;

width: 100%;

height: 100%;

}

input[type="checkbox"]:checked {

background: #b40000;

transform: rotateZ(405deg);

}

input[type="checkbox"]:checked ~ #izq {

transform: translateX(-50%);

}

input[type="checkbox"]:checked ~ #der {

transform: translateX(50%);

/* modifique transition: "all" por "transform" // creditos Fork: http://codepen.io/bfeelyweb/details/AuJaz#forkline de Bennett Feely */

}

#izq,

#der {

position: absolute;

-webkit-backface-visibility: hidden;

transition: transform ease-in-out 0.4s;

width: 50%;

height: 100%;

z-index: 5;

}

#izq {

background: url(http://f.cl.ly/items/3c0k3N320S0c3K2f0i3s/vulcano_izq.jpg) no-repeat top right;

}

#der {

background: url(http://f.cl.ly/items/0n423z3H2h3a1X222P1q/vulcano_der.jpg) no-repeat left top;

left: 50%;

}

h1 {

color: #111;

text-shadow: 0px 1px 1px #4d4d4d;

font-size: 3em;

text-align: center;

position: absolute;

top: 50%;

width: 100%;

}