HTML遮罩效果

最新推荐文章于 2025-03-12 11:11:17 发布

原创最新推荐文章于 2025-03-12 11:11:17 发布 · 800 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

个人学习总结专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现规则提示弹出框及遮罩效果，包括样式定义、关键选择器应用与动态过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遮罩效果：
<style type="text/css">
 .rule_png{width:100%; height:100%; position:fixed; left:0; top:0; overflow:hidden; z-index:-1; opacity:0;transition:0.5s;-webkit-transition:0.5s;}
 .rule_png.current{opacity:1; z-index:1;}
 .rule_png>div{width:100%; margin:0 auto; max-width:514px; position:relative; top:130px; height:100%; background:url('<%=ctx%>/css/lottery/fx_png.png') no-repeat center top; background-size:100%;}
 .mask{background:#000;opacity:0.6;width: 100%;position: fixed;top:0;left:0;bottom:0;display: none;}
 
</style>


<!-- 规则提示 弹出begin -->
 <div class="rule_png"><div></div></div>
 <!--遮罩 -->
 <div class="mask"></div>