#css动画# 如何实现鼠标经过盒子，盒子向上移动且有阴影？
思路：
在鼠标经过时，触发事件，就用到hover；然后触发的时候 我们期望它是隔一点点时间以后，才有效果；
所以需要先设置触发的时间，就用到transition；然后再处理效果：向上移transform和阴影box-shadow
设置如下：
盒子处：
div {transition: all 0.9s;} /* 鼠标经过触发时间 */
盒子经过时：
div:hover {/ 背景 /box-shadow: 0 .15rem .3rem rgba(0, 0, 0, 0.4);/ box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小)内外阴影inset，默认外阴影 //向上浮动/transform: translateY(-.08rem); //向上浮动了8个像素}
示例代码如下：
html
<div class="grid-content bg-purple"><img :src="`/static/image/join${index + 1}.png`" :alt="item.stage" @click="clickControl(item.id)"><div class="grid-stage"><p>· {{item.stage }}</p></div></div>
css
.grid-content {position: relative;width: 100%;height: 1.87rem;border-radius: .04rem;min-height: .36rem;transition: all 0.9s; /* 鼠标经过触发时间 */}.grid-content:hover{/* 背景 */box-shadow: 0 .15rem .3rem rgba(0, 0, 0, 0.4);/* box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 内外阴影inset，默认外阴影 *//*//向上浮动*/transform: translateY(-.08rem); 向上浮动了8个像素}
