CSS
语言：
CSSSCSS
确定
*,
*:before,
*:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
background: #222;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
div {
width: 300px;
height: 200px;
margin: 20px;
background: aliceblue;
overflow: hidden;
position: relative;
}
div:nth-child(2) {
background: khaki;
}
div:nth-child(3) {
background: salmon;
}
div:before {
content: '+';
color: white;
padding-top: calc(30% - 20px);
padding-left: calc(50% - 20px);
font-size: 4em;
position: absolute;
width: 300px;
height: 200px;
background: rgba(0, 0, 0, 0.5);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: hidden;
-webkit-transition: all 0.5s cubic-bezier(0.68, -0.6, 0.33, 1.65);
transition: all 0.5s cubic-bezier(0.68, -0.6, 0.33, 1.65);
-webkit-transition-property: -webkit-transform, visibility;
transition-property: transform, visibility;
}
div.mouse-from-top:before {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
div.mouse-from-right:before {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
div.mouse-from-bottom:before {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
div.mouse-from-left:before {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
div:hover:before {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
