css 移动遮盖 |css3 矩阵的算法

.demo {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 9999;
}
.demo .move {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 250px;
background-color: #fff;
}
.demo header {
padding: 10px;
font-size: 20px;
font-weight: bold;
background-color: #eee;
}
.demo main {
padding: 20px;
line-height: 1.5;
}
.demo footer {
text-align: right;
padding: 10px;
}

上面的代码是一个简单的CSS移动遮盖层，其中，.demo表示整个遮盖，.move表示遮盖层内的内容。其中，.demo设置了遮盖默认状态下的基本样式，.move为遮盖层内的内容设置样式。整个遮盖的宽度、高度、背景透明度等设置可以依据自己需要进行调整。

CSS 移动遮盖可以应用在弹出框、图片查看器等功能中，能够更好地提高用户体验。