HTML代码制作html5图标

最新推荐文章于 2023-12-27 16:20:14 发布

开心肖肖乐-

最新推荐文章于 2023-12-27 16:20:14 发布

阅读量2.4k

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/weixin_45750195/article/details/104596394

版权

HTML 同时被 2 个专栏收录

19 篇文章 2 订阅

订阅专栏

CSS

16 篇文章 1 订阅

订阅专栏

HTML部分
这个图标全部是由div标记来实现的，首先定义了一个大的框架，然后在里面并列存放光束、盾牌、数字和HTML字样图片。光束是通过把div设置成长条的形状，然后复制多个，使用transform的rotate属性来实现旋转，最后实现光束的制作然后通过设置宽高和它们的位置来制作盾牌和数字5以及右边橘色部分。最后插入图片。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="html5 logo.css" type="text/css">
 </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: 229px;">
    <!左盾牌>
    <div class="dshield1"></div>
    <div class="dshield2"></div>
    <div class="dshield3"></div>
    <!右盾牌>
    <div class="dshield4"></div>
    <div class="dshield5"></div>
    <div class="dshield6"></div>
    <!浅橘色部分>
    <div style="transform: scale(0.82); left: 31px; top: 25px;">
     <div class="lshield1"></div>
     <div class="lshield2"></div>
     <div class="lshield3"></div>
    </div>
    <!数字5左半边>
    <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="dshield7"></div>
    <div class="lshield4"></div>
    <img src="HTML字样.png">
   </div>
  </div>
 </body>
</html>

css样式设置
下面是样式设置，其中bg为整个框架，beam是光束，shield是盾牌，gray和white是数字5，img为HTML字样的图片。其中 transform: skew()是CSS3的新属性。

div{
 position: absolute;
}
.bg{
 width: 800px;
 height: 600px;
 background-color: lightgrey;
 overflow: hidden;
}
.beam{
 width: 1600px;
 height: 20px;
 background-color: white;
 top: 290px;
 left: -400px;
}
.dshield1,.dshield2,.dshield3,.dshield4,.dshield5,.dshield6,.dshield7{
 background-color: #e15016;
}
.dshield1{
 left: 32px;
 width: 140px;
 height: 346px;
}
.dshield2{
 transform: skewx(5deg);
 left: 16px;
 width: 100px;
 height: 346px;
}
.dshield3{
 transform: skewY(15deg);
 top: 265px;
 left: 32px;
 width: 140px;
 height: 100px;
}
.dshield4{
 left: 172px;
 width: 140px;
 height: 346px;
}
.dshield5{
 transform: skewx(-5deg);
 left: 227px;
 width: 100px;
 height: 346px;
}
.dshield6{
 transform: skewY(-15deg);
 top: 265px;
 left: 172px;
 width: 140px;
 height: 100px;
}
.dshield7{
 top: 199px;
 left: 60px;
 width: 80px;
 height: 20px;
}
.lshield1,.lshield2,.lshield3,.lshield4{
 background: #ee6812;
}
.lshield1{
 left: 172px;
 width: 140px;
 height: 346px;
}
.lshield2{
 transform: skewX(-5deg);
 left: 227px;
 width: 100px;
 height: 363px;
}
.lshield3{
 transform: skewY(-15deg);
 top: 282px;
 left: 172px;
 width: 138px;
 height: 100px;
}
.lshield4{
 top: 113px;
 left: 180px;
 width: 100px;
 height: 43px;
}
.gray1,.gray2,.gray3,.gray4{
 background-color: #ebebeb;
}
.gray1{
 height: 43px;
 width: 102px;
 left: 70px;
 top:70px
}
.gray2{
 height: 216px;
 width: 46px;
 transform:skewX(5deg);
 top:70px;
 left: 75px;
}
.gray3{
 width: 95px;
 height: 43px;
 left: 77px;
 top:156px;
}
.gray4{
 height: 47px;
 width: 87px;
 left: 85px;
 top:251px;
 transform:skewy(15deg);
}
.white1,.white2,.white3,.white4{
 background-color: white;
}
.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: 235px;
 width: 350px;
 height: 110px;
 transform: scale(0.75);
}

效果图
在这里插入图片描述

开心肖肖乐-

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML代码制作html5图标

HTML部分这个图标全部是由div标记来实现的，首先定义了一个大的框架，然后在里面并列存放光束、盾牌、数字和HTML字样图片。光束是通过把div设置成长条的形状，然后复制多个，使用transform的rotate属性来实现旋转，最后实现光束的制作然后通过设置宽高和它们的位置来制作盾牌和数字5以及右边橘色部分。最后插入图片。<!DOCTYPE html><html> ...
复制链接

扫一扫