HTML5 logo源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 logo</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        div{
            position:absolute;
        }
        /*给类名为bg的元素设置宽、高、背景颜色*/
        .bg{
            width: 8000px;
            height:6000px;
            background:#f2f2f2;
            overflow: hidden;
        }
        /*给类名为beam的元素设置宽、高、背景颜色及绝对定位*/
        .beam{
            width:1600px;
            height:20px;
            background:#fff;
            top:290px;
            left:-400px:
        }
        .d_shield1,.d_shield2 ,.d_shield3,.d_shield3 ,.d_shield4 ,.d_shield5 ,.d_shield6 ,.d_shield7  {
            background:#e15016;
        }
        /*给类名为d_shield1 的元素设置宽、高及绝对定位*/
        .d_shield1 {
            left:32px;
            width:140px;
            height:346px;
        }
        .d_shield2 {
            transform: skewx(5deg);    /*变形(CSS3 新增属性) :水平方向斜切5度*/
            left:16px;
            width:100px;
            height:346px;
        }
        .d_shield3 {
            transform: skewy(15deg);
            top:265px;
            left:32px;
            width:140px;
            height:100px;
        }
        .d_shield4 {
            left:172px;
            width:140px:
            height:346px;
        }
        .d_shield5 {
            transform :skewX(-5deg) ;
            left :227px;
            width:100px;
            height:346px;
        }
        .d_shield6 {
            transform:skewY(-15deg) ;
            top:265px;
            left:172px;
            width:140px;
            height:100px;
        }
        .d_shield7 {
            height:20px;
            top:199px;
            width:80px;
            left:60px;
        }
        .l_shield1 ,.l_shield2 ,.l_shield3 ,.l_shield4 {
            background:#ee6812;
        }
        .l_shield1 {
            left:172px;
            width:140px;
            height:346px;
        }
        .l_shield2 {
            transform:skewX(-5deg) ;
            left:227px;
            width:100px;
            height:363px;
        }
        .l_shield3 {
            transform:skewY(-15deg) ;
            top:282px;
            left:172px;
            width:138px;
            height:100px;
        }
        .l_shield4 {
            height:43px;
            top:113px;
            width:100px;
            left:180px;
        }
        .gray1,.gray2,.gray3,.gray4{
            background:#ebebeb;
        }
        /*给类名为gray1的元素设置宽、高及绝对定位*/
        .gray1 {
            height:43px;
            width:102px;
            left:70px;
            top:70px;
        }
        /*给类名为gray2的元素设置宽、高、斜切变形及绝对定位*/
        .gray2 {
            width:46px;
            height:216px;
            transform:skewX(5deg) ;
            top:70px;
            left:75px;
        }
        .gray3 {
            width:95px;
            height:43px;
            left:77px;
            top:156px;
        }
        .gray4 {
            width:87px;
            height:47px;
            left:85px;
            top:251px;
            transform: skewY(15deg) ;
        }
        .white1,.white2,.white3,.white4{
            background:#fff;
        }
        /*给类名为white1的元素设置宽、高及绝对定位*/
        .white1 {
            width:102px;
            height:43px;
            left:172px;
            top:70px;
        }
        .white2 {
            width:46px;
            height:216px;
            transform:skewx(-5deg);
            left:223px;
            top:70px;
        }
        .white3 {
            height:43px;
            width:95px;
            left:172px;
            top:156px;
        }
        .white4 {
            width:87px;
            height:47px;
            left:172px;
            top:251px;
            tansform:skewy(-15deg);
        }
        /*给img标签设置宽、高及固定定位*/
        img{
            position:fixed;
            top:-180px;
            left:-125px;
            width:250px
            height:165px;
        }
    </style>
    <link href="css/logo.css" type="text/css " hel="stylesheet">
</head>
<body>
<div class="bg">
    <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 class="logo" style="top:120px;left:630px">
        <!--盾牌(左)-->
        <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>
        <!--浅橘色部分-->
        <div style="transform:scale(0.82);left:31px;top:25px;">
            <div class="l_shield1"></div>
            <div class="l_shield2"></div>
            <div class="l_shield3"></div>
            <!--以下4个div组成的logo里面数字5的左半边灰色部分-->
            <div class="gray1"></div>
            <div class="gray2"></div>
            <div class="gray3"></div>
            <div class="gray4"></div>
            <!--以下4个div组成的logo里面数字5的右半边白色部分-->
            <div class="white1"></div>
            <div class="white2"></div>
            <div class="white3"></div>
            <div class="white4"></div>
            <!--最后的修补-->
            <div class="d_shield7"></div>
            <div class="l_shield4"></div>
            <div src="images/HTML.png"></div>
            <div class="img" >
                <img src=".idea/HTML.png"/>
        </div>
    </div>
</div>
</body>
</html>

HTML5  logo源代码

上一篇:前端联系项目------Day3 header


下一篇:[译]10个惊人的CSS和JavaScript动画logos例子