遮罩层

遮罩层

结构很简单，只要一个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，这样就可以让它到最右边了。同理可得，右到左、上到下都是如此。