使用HTML5+CSS3绘制HTML5的logo

原创

王凡汎

修改于 2020-04-03 10:43:20

9660

修改于 2020-04-03 10:43:20

文章被收录于专栏：Web前端知识点概要Web前端知识点概要

一.了解HTML5 logo 的构造

1.对HTML5的logo进行分析：

2.logo的实现步骤：

图1：定位出整个页面的背景区域“bg”,并实现背景光束。

图2：定义logo样式，并画出盾牌的左半边。

图3：画出盾牌的右半边。

图4：画出浅橘色区域。

图5：画出“5”的左半边。

图6：画出“5”的右半边。

图7：用色块遮盖多余的部分。

图8：在盾牌上方添加“HTML”图片。

二：代码实现

1.HTML代码部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 logo</title>
<link href="css/logo.css" type="text/css" rel="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="white beam" style="transform:rotate(165deg)"></div>
      <div class="white beam" style="transform:rotate(175deg)"></div>
      <div class="logo" style="top:120px;left:229px;">
         <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>
         </div>
         <div class="gray1" ></div>
         <div class="gray2" ></div>
         <div class="gray3" ></div>
         <div class="gray4" ></div>
         <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>
         <img src="images/HTML.png">
      </div>
   </div>
</body>
</html>

2.CSS代码部分

body{
    margin:0;
    padding:0;
}
div{
    position:absolute;
}
.bg{
    width:800px;
    height:600px;
    background:#f2f2f2;
    overflow:hidden;
}
.beam{
    width:1600px;
    height:20px;
    background:#fff;
    top:290px;
    left:-400px;
}
.d_shield1,.d_shield2,.d_shield3,.d_shield4,.d_shield5,.d_shield6,.d_shield7{
    background:#e15016;
}
.d_shield1{
    left:32px;
    width:140px;
    height:346px;
}
.d_shield2{
    transform:skewx(5deg);
    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{
    height:43px;
    width:102px;
    left:70px;
    top:70px;
}
.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{
    width:102px;
    height:43px;
    left:172px;
    top:70px;
}
.white2{
    width:46px;
    height:216px;
    transform:skewx(-5deg);
    top:70px;
    left:223px;
}
.white3{
    height:43px;
    width:95px;
    left:172px;
    top:156px;
}
.white4{
    height:47px;
    width:87px;
    left:172px;
    top:251px;
    transform:skewy(-15deg);
}
img {
    position: fixed;
    top: 8px;
    left: 225px;
    width: 350px;
    height: 110px;
}