先来看一下效果
shadow.gif
效果的实现依靠巧妙利用css属性shadow。
这里讲一下shadow的具体属性：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：必填项，表示水平（即X轴）阴影的位置。正值使阴影出现在元素的右边，负值出现在元素的左边。
v-shadow：必填项，表示垂直（即Y轴）阴影的位置。正值使阴影出现在元素的下边，负值出现在元素的上边。
blur： 可选，表示模糊距离。模糊数值越大，尖锐度越小，阴影越朦胧和模糊。负值是不被允许的，并会被处理成0。
spread ：可选，表示阴影的尺寸。可以理解为从元素到阴影的距离。正值会让阴影向各个方向按照指定的数值延伸。负值会让阴影收缩得比元素本身尺寸更小。
color ：可选，表示阴影的颜色。这个不需要我多说了吧，想必大家都会。
inset：可选。将外部阴影 (outset) 改为内部阴影。默认为outset
利用阴影显示向上浮动效果。
原理就是在元素下边增加一个阴影，鼠标移上去的时候让阴影缩小，并让元素往上移！
具体的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.shadow{
position: relative;
width: 300px;
height: 300px;
background-color:#7FFF00;
margin:80px auto;
}
.shadow{
transform: translateY(1);
transition: all 600ms;
}
/*！！！伪元素是加在“容器内部”，非容器就加在后面！！！*/
/*创建伪元素，存放阴影，并不增加新dom元素 ()*/
.shadow::after{
content: "";
display: block;
position: absolute;
bottom: -60px;
height: 14px;
width: 300px;
/*把背景色，阴影都设成同一颜色*/
background-color: #ccc;
border-radius: 50%;
box-shadow: 0 0 15px 10px #ccc;
transition: all 600ms;
}
.shadow:hover{
transform: translateY(-20px);
transition: all 800ms;
}
.shadow:hover:after{
/*y轴上移20px,缩小0.6倍，有一种远去的效果*/
transform: translateY(-20px);
transform: scale(0.6);
transition: all 800ms;
}
</style>
</head>
<body>
<div class="shadow"></div>
<script type="text/javascript">
</script>
</body>
</html>
