HTML5之 LOGO绘制

最新推荐文章于 2024-04-29 21:30:00 发布

Volcano_WQL

最新推荐文章于 2024-04-29 21:30:00 发布

阅读量491

点赞数

文章标签： html5 css css3 html

本文链接：https://blog.csdn.net/qq_45614713/article/details/104967658

版权

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;
}

效果如下：
在这里插入图片描述

Volcano_WQL

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5之 LOGO绘制

H5之LOG1.定义整个页面背景区域"bg",并设置背景光束旋转5度[style=“transform:rotate(5deg)”]定义’logo’样式，画出盾牌的左半边，css样式- ->d_shield 统一设置背景颜色，并分别设置盾牌每个不同位置的区域大小同理画出盾牌右半边,css样式–>l_shield画出5，样式->grayz、white用色块遮盖多余的...
复制链接

扫一扫