H5 ,Css实现了你的logo

2024-01-26 20:09:46
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5 LOGO</title>
        <style>
            .bg{
                width: 500px;
                height: 500px;
                background: mediumpurple;
                margin: auto;/*网页居中*/
                position: relative;
                overflow: hidden;/*隐藏内容溢出*/
            }
            .light{
                background: paleturquoise;
                width: 800px;
                height: 20px;
                position: absolute;
                left:  -150px; 
                top: 240px; 
            }
            #dunpai{
                position: relative;
                width: 100px;
            }
            .l1{position:absolute; background: #8A2BE2; width: 100px; height: 300px; left: 150px; top: 100px; }
            .l2{position:absolute; background: #8A2BE2; width: 100px; height: 300px; left: 118px; top: 100px; transform: skewX(12deg);    }
            .l3{position:absolute; background: #8A2BE2; width: 100px; height: 100px; left: 150px; top: 310px; transform: skewY(12deg);    }
            
            .r1{position:absolute; background: #8A2BE2; width: 100px; height: 300px; left: 250px; top: 100px; }
            .r2{position:absolute; background: #8A2BE2; width: 100px; height: 300px; left: 282px; top: 100px; transform: skewX(-12deg);    }
            .r3{position:absolute; background: #8A2BE2; width: 100px; height: 100px; left: 250px; top: 310px; transform: skewY(-12deg);    }
            
            #shield{position: absolute; transform: scale(0.9); left: 25px; top: 25px;}
            .rg1{position:absolute; background: deepskyblue; width: 100px; height: 300px; left: 250px; top: 100px;     }
            .rg2{position:absolute; background: deepskyblue; width: 100px; height: 300px; left: 282px; top: 100px; transform: skewX(-12deg);}
            .rg3{position:absolute; background: deepskyblue; width: 100px; height: 100px; left: 250px; top: 310px; transform: skewY(-12deg);}
            
            .wu1,.wu2,.wu3,.wu4{background: #eee; position: absolute;}
            .wu1{height: 20px; width: 80px; left: 170px; top: 153px;    }
            .wu2{height: 20px; width: 60px; left: 190px; top: 237px;    }
            .wu3{height: 18px; width: 43px; left: 209px; top: 339px; transform: skewY(12deg);    }
            .wu4{height: 200px; width: 20px; left: 188px; top: 153px; transform: skewX(12deg);    }
            
            .wu5,.wu6,.wu7,.wu8{background: #fff; position: absolute;}
            .wu5{height: 20px; width: 80px; left: 250px; top: 153px;    }
            .wu6{height: 20px; width: 60px; left: 250px; top: 237px;    }
            .wu7{height: 18px; width: 43px; left: 250px; top: 339px; transform: skewY(-12deg);    }
            .wu8{height: 200px; width: 20px; left: 296px; top: 153px; transform: skewX(-12deg);    }
            
            .wu9{position:absolute; height:31px; width: 30px; left: 189px; top: 257px; background: #8A2BE2;  transform: skewX(12deg);}
            .wu10{position:absolute; height:64px; width: 29px; left: 305px; top: 173px; background: deepskyblue;; transform: skewX(-12deg);    }
            
            #txt{position: absolute; width:180px ; height: 80px; left: 152px; top: 10px; font-size: 75px;}
        </style>
    </head>
    <body>
        <div class="bg">
            <div class="light" style="transform:rotate(60deg) ;"></div>
            <div class="light" style="transform:rotate(90deg) ;"></div>
            <div class="light" style="transform:rotate(120deg) ;"></div>
            <div class="light" style="transform:rotate(150deg) ;"></div>
            <div class="light" style="transform:rotate(180deg) ;"></div>
            <div class="light" style="transform:rotate(210deg) ;"></div>
            
            <div id="dunpai">
                <div class="l1"></div>
                <div class="l2"></div>
                <div class="l3"></div>
                
                <div class="r1"></div>
                <div class="r2"></div>
                <div class="r3"></div>
                
                <div id="shield">
                    <div class="rg1"></div>
                    <div class="rg2"></div>
                    <div class="rg3"></div>
                </div>
                
                <div class="wu1"></div>
                <div class="wu2"></div>
                <div class="wu3"></div>
                <div class="wu4"></div>
                
                <div class="wu5"></div>
                <div class="wu6"></div>
                <div class="wu7"></div>
                <div class="wu8"></div>
                
                <div class="wu9"></div>
                <div class="wu10"></div>
                
                <div id="txt">HTML</div>
            </div>
            
            
        </div>
    </body>
</html>
码农公寓

相关文章
