CSS 遮罩动画
时间: 2023-07-30 13:06:21 浏览: 91
要实现 CSS 遮罩动画,可以使用 CSS 中的 `transition` 属性和 `transform` 属性。
`transition` 属性可以设置元素过渡效果,包括过渡的属性、过渡时间、过渡方式等。
`transform` 属性可以设置元素的变换效果,包括平移、旋转、缩放等。
示例代码如下:
HTML:
```html
<div class="mask"></div>
```
CSS:
```css
.mask {
/* 定位 */
position: fixed;
top: 0;
left: 0;
/* 大小 */
width: 100%;
height: 100%;
/* 背景颜色 */
background-color: black;
/* 透明度 */
opacity: 0;
/* 过渡效果 */
transition: opacity 0.5s ease;
/* 层级 */
z-index: 9999;
}
.show {
/* 透明度 */
opacity: 0.5;
/* 变换效果 */
transform: scale(1);
}
```
以上示例中,`.mask` 元素设置了 `position: fixed` 属性使其覆盖整个页面,设置了 `background-color` 属性为黑色,同时使用 `opacity` 属性设置其透明度为 0,并设置了 `transition` 属性使其透明度变化时有过渡效果。`.show` 类用来控制元素的显示状态,当添加 `.show` 类时,`.mask` 元素的透明度会从 0 变为 0.5,同时使用 `transform` 属性实现缩放效果,从而实现了遮罩动画效果。
JavaScript 代码如下:
```js
const mask = document.querySelector('.mask');
function showMask() {
mask.classList.add('show');
}
function hideMask() {
mask.classList.remove('show');
}
```
以上 JavaScript 代码中,`showMask` 函数用来显示遮罩层,`hideMask` 函数用来隐藏遮罩层,通过操作 `.mask` 元素的类名来实现遮罩动画效果。