html+css+动画过渡做遮罩层

html+css+动画过渡做的遮罩层

这个最重要的是css样式，首先先看看html架构吧：
两个div不用多讲，上就对了：

<div id="mask_layer">天王盖地虎
	<div class="masked">宝塔镇河妖</div>
</div>

css中最重要的只有那么几句话：
大框中设置溢出隐藏：overflow: hidden
小框设置透明度：opacity: 0.5
从 0.0 （完全透明）到 1.0（完全不透明）
重点是这句：
transition: top 2s,opacity 2s;
top在2s之内发生变化，透明度也在2s之内发生变化
:hover鼠标滑过，top的值由150变成0，透明度由0.5变成1，用时两秒
这里大小框的定位我用的是子绝父相，顾名思义，父级大框用相对定位，子级小框用绝对定位就搞定啦！

#mask_layer{width: 200px;height: 200px;background: #269ABC;position: relative;overflow: hidden;
color: white;text-align: center;}
.masked{width: 200px;height: 200px;background: #9ACD32;opacity: 0.5;
position: absolute;top: 150px;transition: top 2s,opacity 2s;}
.masked:hover{top: 0px;opacity: 1;}

这个小Demo还是很简单的，浅显易懂，因为自己写的项目中有用到，就顺手总结啦~