H5之LOG
1.定义整个页面背景区域"bg",并设置背景光束旋转5度[style=“transform:rotate(5deg)”]
定义’logo’样式,画出盾牌的左半边,css样式- ->d_shield
统一设置背景颜色,并分别设置盾牌每个不同位置的区域大小
同理画出盾牌右半边,css样式–>l_shield
画出5,样式->grayz、white
用色块遮盖多余的部分
在盾牌上方,添加"html"的图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 logo</title>
<link href="logo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="bg"><!-- 最外层 -->
<!-- 光束div,旋转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="white beam" style="transform:rotate(165deg)"></div>
<div class="white beam" style="transform:rotate(175deg)"></div>
<!-- 中心logo 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进行缩放变形为原来0.82倍 -->
<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>
<!-- 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>
<!-- 最后的修补 -->
<div class="d_shield7"></div>
<div class="l_shield4"></div>
<img src="HTML.png">
</div>
</div>
</body>
</html>
css样式代码:
body{
margin: 0;
padding:0;
}
div{
/* 所有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{
top:199px;
left:60px;
width:80px;
height:20px;
}
.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设置宽、高及固定定位 */
img{
position: fixed;
top:8px;
left:225px;
width:350x;
height:110px;
}
效果如下: