css遮罩层

*结构很简单，只要一个div就可以，直接看样式。

这是从下到上，*

    div {
		width: 500px;	/* 宽 */
		height: 500px;	/* 高 */
		background: yellow;	/* 背景颜色 */
		margin: 50px auto;	/* 水平居中 */
		position: relative;	/* 相对定位 */
		overflow: hidden;	/* 溢出隐藏 */
	}

	div::after {
		/* 创建伪类 */
		content: "";	/* 内容为空 */	
		display: block;	/* 转为块元素 */	
		width: 500px;
		height: 500px;
		background: rgba(1, 1, 1, 0.4);	/* 前三个代表颜色，最后一个代表透明度 */	
		position: absolute;	/* 决对定位 */
		top: 500px;	/* 定位的位置 */
		transition: 1s;
		/* 动画过度效果 */
				}

	div:hover:after {
		top: 0;
		/* 当鼠标经过div的时候使after的top值为0 */
	}

上面那个是从上到下的，如果换成从左到右呢，代码如下:

    div {
		width: 500px;
		height: 500px;
		background: yellow;
		margin: 50px auto;
		/* 水平居中 */
		position: relative;	/* 相对定位 */
		overflow: hidden;	/* 溢出隐藏 */
	}

	div::after {
		/* 创建伪类 */
		content: "";
		display: block;	/* 转为块元素 */	
		width: 500px;
		height: 500px;
		background: rgba(1, 1, 1, 0.4);
		position: absolute;	/* 决对定位 */
		top: 0;
		left: -500px;
		transition: 1s;
		/* 动画过度效果 */
	}

	div:hover:after {
		left: 0;
		/* 当鼠标经过div的时候 */
	}

其实就是把after初始位置挪到最左边，然后设置一个鼠标经过效果，让它经过div时候left值为0，这样就可以让它到最右边了。同理可得，右到左、上到下都是如此。