#css动画#【四】如何实现⿏标经过盒⼦，盒⼦向上移动且有阴影？#css动画# 如何实现⿏标经过盒⼦，盒⼦向上移动且有阴影？
box shadow怎么设置思路：
在⿏标经过时，触发事件，就⽤到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个像素
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。