boxshadow 探索 CSS3 中的 box-shadow 属性( 二 )

通过变换框阴影(和变换)属性，我们可以创建一个元素靠近或远离用户的假象。
。弹出{
变换:scale(1)；
框影:0px0px10px5pxrgba(0，0，0，0.3)；
过渡:box-shadow0.5s，transform0.5s
}
。弹出:悬停{
变换:比例(1.3)；
框影:0px0px50px10pxrgba(0，0，0，0.3)；
过渡:box-shadow0.5s，transform0.5s
}

文章图片

漂浮效应
我们可以在伪元素中添加阴影效果，比如:after。我们可以用它在元素的底部创建一个阴影，给人一种元素浮动或下降的错觉。
【boxshadow 探索 CSS3 中的 box-shadow 属性】。浮动{
位置:相对；
translate:Translatey(0)；
transition:transforms；
}
。浮动:在{
内容:“”；
显示:块；
位置:绝对；
底部:-30px；
左:50%；
高度:8px
宽度:100%；
框影:0px0px15px0pxrgba(0，0，0，0.4)；
边界半径:50%；
背景色:rgba(0，0，0，0.2)；
transform: translate(-50%，0)；
transition:transforms；
}
/*悬停状态*/
。浮动:悬停{
transform:translateY(-40px)；
transition:transforms；
}
。浮动:悬停:在{
变换:平移(-50%，40px)比例(0.75)；
transition:transforms；
}