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%;
}