#css动画# 【四】如何实现鼠标经过盒子，盒子向上移动且有阴影？

#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个像素

}