H5 ,Css实现了你的logo

2020-09-11 20:02:08 阅读：170 来源： 互联网

标签：top 100px height width position logo H5 Css left

<!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>

标签：top,100px,height,width,position,logo,H5,Css,left
来源： https://www.cnblogs.com/21doctor-sun/p/13653813.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

H5 ,Css实现了你的logo