HTML5 logo

最新推荐文章于 2021-06-16 05:02:06 发布

tian_to_tian

最新推荐文章于 2021-06-16 05:02:06 发布

阅读量240

点赞数

本文链接：https://blog.csdn.net/tian_to_tian/article/details/104654699

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--网页标题为HTML5 logo-->
<title>HTML5 logo</title>
<!--链入式样式表-->
<link href="logo.css" type="text/css" rel="stylesheet">
</head>
<body>
       <!--这是HTML5 logo最外层的盒子div，类名为bg-->
       <div class="bg">
       <!--每一束变色光速的div盒子，行内样式style="transform:rotate(5deg)"用于设置div变形的样式，即旋转5度，这是CSS3新增的属性-->
       <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>
       <!--中心logo的div盒子类名为logo，设置行内样式为绝对定位，距离上边120px，距离左边229px-->
       <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盒子进行某种变形（CSS3新增属性），缩放为原来的0.82倍，并给这个div绝对定位-->
             <div style="transform:scale(0.82);left:31px;top:25px">
                   <div class="1_shield1"></div>
                   <div class="1_shield2"></div>
                   <div class="1_shield3"></div>
              </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="1_shield4"></div>
              <img src="images/HTML.png">
        </div>
       </div>
</body>
</html>

/*第1单元 项目1-1 使用HTML5+CSS3绘制HTML5的logo*/
body{
         margin:0;
         padding:0;
}
div{
      position:absolute;
}
/*给类名为bg的元素设置宽、高、背景颜色*/
.bg{
      width:800px;
      height:600px;
      background:#f2f2f2;
      overflow:hidden;
}
/*给类名为beam的元素设置宽、高、背景颜色及绝对定位*/
.beam{
           width:1600px;
           height:20px;
           background:#fff;
           top:290px;
           left:-400px;
}
.d_shield,.d_shield2,.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);
      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;
}
.1_shield1,.1_shield2,.1_shield3,.1_shield4{
      backround:#ee6812;
}
.1_shield1{
      left:172px;
      width:140px;
      height:346px;
}
.1_shield2{
     transform:skewx(-5deg);
     left:227px;
     width:100px;
     height:363px;
}
.1_shield3{
     transform:skewy(-15deg);
     top:282px;
     left:172px;
     width:138px;
     height:100px;
}
.1_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的4个元素都设置背景颜色为白色*/
.white1,.white2,.white3,.white4{
       background:#fff;
}
/*给类名为white1的元素设置宽、高及绝对定位*/
.white1{
       width:102px;
       height:43px;
       left:172px;
       top:70px;
}
/*给类名为white2的元素设置宽、高、斜切变形及绝对定位*/
.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标签设置宽、高及固定定位*/
img{
       position:fixed;
       top:8px;
       left:225px;
       width:350px;
       height:110px;
}

tian_to_tian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 logo

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>HTML5 logo</title><link href="logo.css" type="text...
复制链接

扫一扫