css 砖瓦墙大红门_开个大红门效果css-CSDN博客

本文链接：https://blog.csdn.net/c_qianxia5040/article/details/118414448
效果图
在这里插入图片描述
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑夜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url(./images/qiang_bg.jpg) no-repeat;
            background-size: cover;
        }
        .mask{
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, .8);
        }
        div[class^="light"]{
            position: absolute;
            top: 10%;
            width: 300px;
            height: 300px;
        }
        .light01{
            right: 23%;
        }
        .light02{
            left: 23%;
        }
        /* 灯光 */
        .source {
            position: absolute;
            background: radial-gradient(#fff 0%, rgba(243, 206, 205, .4) 35%, rgba(88, 88, 88, .3) 60%, rgba(90, 88, 88, 0) 70%, rgba(49, 48, 48, 0) 80%);
            border-radius: 50%;
            width: 300px;
            height: 300px;
            top: 0;
            right: 0;
        }
        /* 灯罩 */
        .lamp1{
            position: absolute;
            top: -26%;
            left: 17%;
            width: 200px;
        }
        /* 门框 */
        div[class^="doorframe"]{
            position: absolute;
            background-color: #4d2728;
            box-shadow: 0 0 5px rgba(0, 0, 0, .8);
        }
        .doorframe1{
            top: -50px;
            left: -30px;
            width: 560px;
            height: 50px;
        }
        .doorframe2{
            top: 0px;
            left: -30px;
            width: 30px;
            height: 600px;
        }
        .doorframe3{
            top: 0px;
            right: -30px;
            width: 30px;
            height: 600px;
        }
        /* 大门 */
        .door{
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 500px;
            height: 600px;
            background-color: #9b292b;
            z-index: -1;
            display: flex;
            border-radius: 4px 4px 0 0;
        }
        .door_left,.door_right{
            width: 49%;
            height: 100%;
        }
        .door_left{
            border-right: 2px solid #333;
        }
        .door_right{
            border-left: 2px solid #333;
        }
        /* 钉 */
        div[class^="ding0"]{
            position: absolute;
            width: 220px;
            display: flex;
            justify-content: space-between;
        }
        .ding01{
            top: 60%;
            left: 15px;
        }
        .ding02{
            top: 35%;
            left: 15px;
        }
        .ding03{
            top: 60%;
            right: 15px;
        }
        .ding04{
            top: 35%;
            right: 15px;
        }
        .ding_small{
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: linear-gradient(-35deg, #6e3431, #dfb7a8);
            box-shadow: 0 4px 10px rgba(0, 0, 0, .8);
        }
        /* 门闩 */
        .latch1{
            position: absolute;
            top: 44%;
            left: 35%;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(-35deg, #a0834c, #eccc9b);
        }
        .latch2{
            position: absolute;
            top: 44%;
            right: 35%;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(-35deg, #a0834c, #eccc9b);
        }
        .latch_b{
            position: absolute;
            top: 30px;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #9b292b;
        }
        .latch_b::after {
            position: absolute;
            content: '';
            background: linear-gradient(to top,rgb(114, 112, 112), rgb(231, 208, 208));
            bottom: 0;
            right: 0;
            left: 0;
            top: 0;
            z-index: -1;
            transform: scale(1.2);
            border-radius: 50%;
        }

    </style>
</head>
<body>
    <div class="mask">
        <!-- 墙灯 -->
        <div class="light01">
            <img src="./images/lamp.png" alt="" class="lamp1"/>
            <div class="source"></div>
        </div>
        <div class="light02">
            <img src="./images/lamp.png" alt="" class="lamp1"/>
            <div class="source"></div>
        </div>
        
        <!-- 大门 -->
        <div class="door">
            <div class="doorframe1"></div>
            <div class="doorframe2"></div>
            <div class="doorframe3"></div>
            <div class="door_left"></div>
            <div class="door_right"></div>
            <!-- 门钉 -->
            <div class="ding01">
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
            </div>
            <div class="ding02">
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
            </div>
            <div class="ding03">
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
            </div>
            <div class="ding04">
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
                <div class="ding_small"></div>
            </div>
            <div class="latch1">
                <div class="latch_b"></div>
            </div>
            <div class="latch2">
                <div class="latch_b"></div>
            </div>
        </div>
    </div>
    
</body>
</html>
用到的图片
在这里插入图片描述