CSS3target伪类元素选择实现相似灯箱效果

时间 2020-08-18 标签 css3target css target 元素选择实现相似效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> * { padding: 0; margin: 0; } body { position: relative; } .btn { width: 100px; height: 40px; } .btn, .btn a { display: block; width: 100px; height: 40px; line-height: 40px; text-align: center; background: #ccc; } .Lbox { width: 100%; height: 100%; display: none; position: fixed; background: #000; opacity: 0.85; } .Ibtn { width: 200px; height: 200px; margin: 0 auto; margin-top: 10%; position: relative; background: #fff; } .Lcontent { width: 100%; height: 100%; } :target { display: block; } </style>
</head>

<body>
    <div class="Lbox" id="open">
        <div class="Lcontent">
            <div class="Ibtn">

            </div>
        </div>
    </div>
    <div class="btn">
        <a href="#open">开灯</a>
    </div>
</body>

</html>