鼠标跟随效果css,CSS3 鼠标跟随+滑动覆盖动效

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;

}