CSS鼠标悬浮动画-hover属性详解

　　.box {

　　width: 200px;

　　height: 200px;

　　background: aqua;

　　-webkit-transform: perspective(1px) translateZ(0);

　　transform: perspective(1px) translateZ(0);

　　box-shadow: 0 0 1px rgba(0, 0, 0, 0);

　　position: relative;

　　-webkit-transition-duration: 0.3s;

　　transition-duration: 0.3s;

　　-webkit-transition-property: transform;

　　transition-property: transform;

　　&::before {

　　pointer-events: none;

　　position: absolute;

　　z-index: -1;

　　content: "";

　　top: 100%;

　　left: 5%;

　　height: 10px;

　　width: 90%;

　　opacity: 0;

　　background: -webkit-radial-gradient(

　　center,

　　ellipse,

　　rgba(0, 0, 0, 0.35) 0%,

　　rgba(0, 0, 0, 0) 80%

　　);

　　background: radial-gradient(

　　ellipse at center,

　　rgba(0, 0, 0, 0.35) 0%,

　　rgba(0, 0, 0, 0) 80%

　　);

　　/* W3C */

　　-webkit-transition-duration: 0.3s;

　　transition-duration: 0.3s;

　　-webkit-transition-property: transform, opacity;

　　transition-property: transform, opacity;

　　}

　　}

　　.box:hover,

　　.box:focus,

　　.box:active {

　　-webkit-transform: translateY(-5px);

　　transform: translateY(-5px);

　　&::before {

　　opacity: 1;

　　-webkit-transform: translateY(5px);

　　transform: translateY(5px);

　　}

　　}