如何用css形成一个遮罩教程

 时间:2024-10-12 20:51:08

1、首先需要模拟新建一个按钮和这个这样的存储div,所有需要新建两个div,其中id为zz的div为遮罩

如何用css形成一个遮罩教程

2、之后给按钮绑定一个方法,而遮罩的处理就是显示这个div,可以看到程序的处理是显示这个遮罩,而2000毫秒(也就是两秒之后)隐藏这个遮罩 function showCSS() { document.getElementById("ZZ").style.display ="block"; setTimeout(function(){ document.getElementById("ZZ").style.display ='none'; },2000); }

如何用css形成一个遮罩教程

3、可看到使用setTimeout,function是方法主题,后面的2000为毫秒延迟时间,在2秒之后遮罩关闭

如何用css形成一个遮罩教程

4、之后还需要在style中定义一个遮罩的css样式属性,#zz绑定id,则表示这个id使用这个css样式

如何用css形成一个遮罩教程

5、其中-moz-opacity: 0.1; opacity: .1; filter: alpha(opacity=10);部分表示遮罩的透明度,苒锃巳伢值越小越透明,值越大颜色越深,需要合理控制这个值保证界面的整体效果

如何用css形成一个遮罩教程

6、宽度高度则是控制这个遮罩的大小,以及这个遮罩的位置,其中index表示遮罩的层级,值越大表示层级越高,在越上层,所有一般遮罩层这个值都比较大

如何用css形成一个遮罩教程

7、如上操作之后,会出现效果点击按钮,出现遮罩

如何用css形成一个遮罩教程
  • LOL如何选择四大重装战士装备
  • 英雄联盟双城之战杰斯皮肤如何获得
  • 口袋妖怪复刻联盟大赛有什么奖励?怎么玩?
  • CSS颜色单位RGB值介绍(22)
  • 奥拉星绝界黑翼王怎么得
  • 热门搜索
    结婚三十年是什么婚 张学友和张家辉到底是什么关系 产检都检查什么 头发少适合什么发型 脱机使用打印机是什么意思 1949年属什么生肖 黄山四绝分别是什么 慰安妇是什么意思 双氧水是什么 9月21日是什么星座