H5 logo

最新推荐文章于 2024-08-10 22:11:57 发布

dthdh4

最新推荐文章于 2024-08-10 22:11:57 发布

阅读量333

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/dthdh4/article/details/104657177

版权

H5 logo

主体部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html5 logo</title>
		<link rel="stylesheet" type="text/css" href="./logo.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="a1"></div>
				<div class="a2"></div>
				<div class="a3"></div>
				
				<div class="a4"></div>
				<div class="a5"></div>
				<div class="a6"></div>
				
				<div style="transform: scale(0.82);left:31px;top: 25px;">
					<div class="b1"></div>
					<div class="b2"></div>
					<div class="b3"></div>
				</div>
				
				<div class="c1"></div>
				<div class="c2"></div>
				<div class="c3"></div>
				<div class="c4"></div>
				
				<div class="d1"></div>
				<div class="d2"></div>
				<div class="d3"></div>
				<div class="d4"></div>
				
				<div class="a7"></div>
				<div class="b4"></div>
				<img src="html.png" >
			</div>
		
		</div>
	</body>
</html>

css部分（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;
}
.a1,.a2,.a3,.a4,.a5,.a6,.a7{
	background:#e15016;	
}
.a1{
	left: 32px;
	width: 140px;
	height: 346px;
}
.a2{
	transform: skewX(5deg);
	left: 16px;
	width: 100px;
	height: 346px;
}
.a3{
	transform: skewY(15deg);
	top: 265px;
	left: 32px;
	width: 140px;
	height: 100px;
}
.a4{
	left: 172px;
	width: 140px;
	height: 346px;
}
.a5{
	transform: skewX(-5deg);
	left: 227px;
	width: 100px;
	height: 346px;
}
.a6{
	transform: skewY(-15deg);
	top: 265px;
	left: 172px;
	width: 140px;
	height: 100px;
}

.a7{
	height: 20px;
	top: 199px;
	width: 80px;
	left: 60px;
}
.b1,.b2,.b3,.b4{
	background: #ee6812;
}
.b1{
	left: 172px;
	width: 140px;
	height: 346px;
}
.b2{
	transform:skewX(-5deg) ;
	left: 227px;
	width: 100px;
	height: 363px;
}
.b3{
	transform: skewY(-15deg);
	top: 282px;
	left: 172px;
	width: 138px;
	height: 100px;
}
.b4{
	height: 43px;
	top: 113px;
	width: 100px;
	left: 180px;
}
.c1,.c2,.c3,.c4{
	background: #ebebeb;
}
.c1{
	height: 43px;
	width: 102px;
	left: 70px;
	top: 70px;
}
.c2{
	width: 46px;
	height: 216px;
	top: 70px;
	left: 75px;
	transform: skewX(5deg);
}
.c3{
	width: 95px;
	height: 43px;
	left: 77px;
	top: 156px;
}
.c4{
	width: 87px;
	height: 47px;
	left: 85px;
	top: 251px;
	transform: skewY(15deg);
}

.d1,.d2,.d3,.d4{
	background: #fff;
}
.d1{
	width: 102px;
	height: 43px;
	left: 172px;
	top: 70px;
}
.d2{
	width: 46px;
	height: 216px;
	top: 70px;
	left: 223px;
	transform: skewX(-5deg);
}
.d3{
	height: 43px;
	width: 95px;
	left: 172px;
	top: 156px;
}
.d4{
	height: 47px;
	width: 87px;
	left: 172px;
	top: 251px;
	transform: skewY(-15deg);
}
img{
	position: fixed;
	top: 7px;
	left: 250px;
	width: 300px;
	height: 90px;
	
}

dthdh4

关注

0
点赞
踩
0

收藏

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

H5 logo主体部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>html5 logo</title> <link rel="stylesheet" type="text/css" href="./logo.css"/>...
复制链接

扫一扫