纯CSS3带遮罩的弹出层插件

安和同学

已于 2024-06-18 11:48:33 修改

阅读量786

点赞数

分类专栏：日常小记文章标签： css实现弹出层

于 2019-01-25 16:05:12 首次发布

本文链接：https://blog.csdn.net/amdd9582/article/details/86647679

版权

日常小记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文提供了一个纯CSS3实现的带遮罩弹出层的示例，通过掌握并运用几个关键的CSS3属性，如定位、过渡效果和层叠上下文，可以轻松创建出丰富的多层次界面效果。

摘要由CSDN通过智能技术生成

dome直接拉走看

重点几个CSS3属性注释标的很清

熟练运用这几个属性可以做各种层次界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<style>
*{
    padding: 0;
    margin: 0;
    text-decoration: none;
}
body{
    background-color: #272727;
}
.container{
    /*vw、vh相对像素，相对于浏览器百分比*/
    width: 100vw;
    height: 100vh;
    /*CSS3flex弹性定位*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn{
    display: block;
    width: 150px;
    height: 60px;
    border-radius: 10px;
    background: #f0f0f0;
    font: bold 26px/60px "微软雅黑";
    text-align: center;
    color: #242424;
    transition: 0.3s ease-in-out;
}
.btn:hover{
    text-shadow: 0 0 2px #000;
    box-shadow: 0 0 10px #fff;
}
.inner{
    width: 100vw;
    height: 100vh;
    background: #f25;
    /*CSS3flex弹性定位*/
    display: flex;
    align-items: center;
    justify-content: center;
    /*增加层，透明为0隐藏最上层*/
    position: absolute;
    z-index: 2;
    opacity: 0;
    /*隐藏box*/
    overflow: hidden;
    /*元素不可见，但元素仍然占空间*/
    visibility: hidden;
    /*过渡效果*/
    transition: 0.6s ease-in-out;
}
.box{
    background: lightblue;
    border-radius: 10px;
    width: 60%;
    height: 80%;
    max-width: 800px;
    max-height: 600px;
    /*CSS3flex弹性定位*/
    display: flex;
    align-items: center;
    justify-content: center;
    /*隐藏box，vw、vh相对像素，相对于浏览器百分比*/
    position: relative;
    bottom: -100vw;
    right: -100vh;
    /*倾斜效果加过渡*/
    transform: rotate(60deg);
    transition: 0.6s ease-in-out;
}
/*:target，选取当前活动元素（不懂修改代码看效果or自行查文档）*/
.inner:target{
    opacity: 1;
    visibility: visible;
}
.inner:target .box{
    bottom: 0;
    right: 0;
    transform: rotate(0);
}
</style>
<body>
<!-- 对于锚点、id注意与css中:target进行联系 -->
<div class="container">
    <a class="btn" href="#inner">OPEN</a>
    <div class="inner" id="inner">
        <div class="box">
            <a class="btn" href="#">CLOSE</a>
        </div>
    </div>
</div>
</body>
</html>