绘制HTML5的Logo

一、HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 logo</title>
    <!--链入式样式表-->
    <link rel="stylesheet" href="logo.css" type="text/css">
</head>
<body>
    <div class="bg">
        <!--每一束的白色光束div盒子，transform:rotate(5deg)代表围绕中心点旋转5度-->
        <div class="beam" style="transform: rotate(5deg)"></div>
        <div class="beam" style="transform: rotate(15deg)"></div>
        <div class="beam" style="transform: rotate(25deg)"></div>
        <div class="beam" style="transform: rotate(35deg)"></div>
        <div class="beam" style="transform: rotate(45deg)"></div>
        <div class="beam" style="transform: rotate(55deg)"></div>
        <div class="beam" style="transform: rotate(65deg)"></div>
        <div class="beam" style="transform: rotate(75deg)"></div>
        <div class="beam" style="transform: rotate(85deg)"></div>
        <div class="beam" style="transform: rotate(95deg)"></div>
        <div class="beam" style="transform: rotate(105deg)"></div>
        <div class="beam" style="transform: rotate(115deg)"></div>
        <div class="beam" style="transform: rotate(125deg)"></div>
        <div class="beam" style="transform: rotate(135deg)"></div>
        <div class="beam" style="transform: rotate(145deg)"></div>
        <div class="beam" style="transform: rotate(155deg)"></div>
        <div class="beam" style="transform: rotate(165deg)"></div>
        <div class="beam" style="transform: rotate(175deg)"></div>
        <!--以上为白色光束-->
        <!--中心盒子-->
        <div style="top: 120px;left: 229px;position: absolute">
            <!--左盾牌-->
            <div class="d_shield1"></div>
            <div class="d_shield2"></div>
            <div class="d_shield3"></div>
            <!--右盾牌-->
            <div class="d_shield4"></div>
            <div class="d_shield5"></div>
            <div class="d_shield6"></div>
            <!--浅橘色部分,transform:scale()为缩放-->
            <!--该盒子内的元素都会进行自动缩放-->
            <div style="transform: scale(0.82);left: 31px;top: 25px;position: absolute">
                <div class="r_shield1"></div>
                <div class="r_shield2"></div>
                <div class="r_shield3"></div>
            </div>
            <!--logo中数字5的左边部分-->
            <div class="gray1"></div>
            <div class="gray2"></div>
            <div class="gray3"></div>
            <div class="gray4"></div>
            <!--logo中数字5的右边部分-->
            <div class="white1"></div>
            <div class="white2"></div>
            <div class="white3"></div>
            <div class="white4"></div>
            <!--数字5最后的修改-->
            <div class="d_shield7"></div>
            <div class="r_shield4"></div>
        </div>
        <!--HTML图片-->
        <!--<img class="img" src="HTML.png">-->
        <!--上面的语句在CSS中用.img-->
        <img src="HTML.png">
    </div>
</body>
</html>

二、CSS代码

body{
    margin: 0px;/*外边距*/
    padding: 0px;/*内边距*/
}
.bg{
    position: relative;/*相对定位*/
}
.bg{
    width: 800px;
    height: 600px;
    background-color: #f2f2f2;
    overflow: hidden;
}
.beam{
    width: 1600px;
    height: 20px;
    top: 290px;/*绝对定位，距父元素上边线290px*/
    left: -400px;/*绝对定位，距父元素左边线290px*/
    background-color: white;
    position: absolute;/*绝对定位*/
}
.d_shield1,.d_shield2,.d_shield3,.d_shield4,.d_shield5,.d_shield6,.d_shield7{
    background: #e15016;
    position: absolute;
}
.d_shield1{
    left: 32px;
    width: 140px;
    height: 346px;
}
.d_shield2{
    transform: skewX(5deg); /*水平斜切5度*/
    left: 16px;
    width: 100px;
    height: 346px;
}
.d_shield3{
    transform: skewY(15deg);/*垂直斜切15度*/
    top: 265px;
    left: 32px;
    width: 140px;
    height: 100px;
}
.d_shield4{
    left: 172px;
    width: 140px;
    height: 346px;
}
.d_shield5{
    transform: skewX(-5deg);
    left: 227px;/*没算出来227，浏览器调试出来的数字*/
    width: 100px;
    height: 346px;
}
.d_shield6{
    transform: skewY(-15deg);
    top: 265px;
    left: 172px;
    width: 140px;
    height: 100px;
}
.r_shield1,.r_shield2,.r_shield3,.r_shield4{
    background-color: #ee6812;
    position: absolute;
}
.r_shield1{
    left: 172px;
    width: 140px;
    height: 346px;
}
.r_shield2{
    transform: skewX(-5deg);
    left: 227px;
    width: 100px;
    height: 363px;
}
.r_shield3{
    transform: skewY(-15deg);
    top: 282px;
    left: 172px;
    width: 140px;
    height: 100px;
}
.gray1,.gray2,.gray3,.gray4{
    background-color: #ebebeb;
    position: absolute;
}
.gray1{
    height: 43px;
    width: 102px;
    left: 70px;
    top: 70px;
}
.gray2{
    transform: skewX(5deg);
    width: 46px;
    height: 216px;
    top: 70px;
    left: 75px;
}
.gray3{
    width: 95px;
    height: 43px;
    left: 77px;
    top: 156px;
}
.gray4{
    transform: skewY(15deg);
    width: 87px;
    height: 47px;
    left: 85px;
    top: 251px;
}
.white1,.white2,.white3,.white4{
    background-color: #fff;
    position: absolute;
}
.white1{
    width: 102px;
    height: 43px;
    top: 70px;
    left: 172px;
}
.white2{
    transform: skewX(-5deg);
    width: 46px;
    height: 216px;
    top: 70px;
    left: 223px;
}
.white3{
    height: 43px;
    width: 95px;
    left: 172px;
    top: 156px;
}
.white4{
    transform: skewY(-15deg);
    height: 47px;
    width: 87px;
    left: 172px;
    top: 251px;
}
.d_shield7{
    height: 20px;
    top: 199px;
    width: 80px;
    left: 60px;
}
.r_shield4{
    height: 43px;
    top: 113px;
    left: 172px;
    width: 103px;
}
img{
    position: absolute;
    left: 234px;
    top: 14px;
}

猜你喜欢