做前端的时候经常会需要许多的效果，今天小编给大家介绍一牡啾锯辏种使用css实现的鼠标滑过块上移并且在块的下方出现阴影的效果。
工具/原料
电脑一台
方法/步骤
1、首先我们创建一个html文件，并且新建一个div，并填充文字，如下图：
2、然后直接使用浏览器打开html文件查看效果，如下图：
3、然后我们给之前创建的div添加css样式，如下图：
4、然后打开浏览器查看效果，可以看到之前添加的样式正确的执行结果，如下图：
5、接下来我们添加一下鼠标滑过div上移的动画效侈砉齿垃果，需要在shadow样式中添加transition-duration:0.3s;设置动画时间为0.3秒t鸡堕樱陨ransition-property:transform;设置变换的属性为transform再添加：hover样式，cursor:pointer;设置鼠标滑过的鼠标形状为小手transform:translateY(-5px);设置鼠标滑过的垂直方向的位移-5px完整代码如下图：
6、打开浏览器，将鼠标滑过创建的div查看添加的上移效果，如下图：
7、接下来我们添加阴影效果：.shadow::b娣定撰钠efore{background:radial-gradi髫潋啜缅ent(ellipseatcenter,rgba(0,0,0,0.35)0%,rgba(0,0,0,0)80%);设置一个渐变色的椭圆阴影height:10px;设置阴影高width:100%;设置阴影宽和之前div一样宽opacity:0;设置阴影透明度为完全透明position:absolute;设置阴影位置为绝对位置，相对于父元素content:'';设置内容为空z-index:-1;将阴影设置为最底层top:100%;设置阴影的垂直方向的位置left:0%;设置阴影的水平方向的位置transition-duration:0.3s;设置动画过度时间为0.3stransition-property:transform,opacity;设置过度属性为位移和透明度}接下来为div滑过阴影添加动画：.shadow:hover::before{opacity:1;设置滑过的时候透明度为1，完全显示transform:translateY(5px);设置垂直方向位移，抵消父元素的位移}具体代码如下图：
8、使用浏览器打开文件，然后使用鼠标滑过div查看鼠标滑过块上移以及阴影效果，如下图：
