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