【web前端】H5图片制作

最新推荐文章于 2023-02-17 13:50:12 发布

shaooohua

最新推荐文章于 2023-02-17 13:50:12 发布

阅读量556

点赞数

文章标签： css html5

本文链接：https://blog.csdn.net/weixin_45486487/article/details/114555155

版权

H5图标制作

point：

css的内嵌和外链式
h5和css的简单应用

h5代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5 logo</title>
		<link href="logo.css" type="text/css" rel="stylesheet">
	</head>
	<body>
		<!-- 这是HTML最外层盒子bg -->
		<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="d_shile1"></div>
				<div class="d_shile2"></div>
				<div class="d_shile3"></div>
				<div class="d_shile4"></div>
				<div class="d_shile5"></div>
				<div class="d_shile6"></div>
				<div style="transform: scale(0.82);left: 31px;top: 25px;">
					<div class="l.shiled1"></div>
					<div class="l.shiled2"></div>
					<div class="l.shiled3"></div>
				</div>
				<div>
					<div class="gray1"></div>
					<div class="gray2"></div>
					<div class="gray3"></div>
					<div class="gray4"></div>
				</div>
				<div>
					<div class="white1"></div>
					<div class="white2"></div>
					<div class="white3"></div>
					<div class="white4"></div>
				</div>
				<div class="d_shiled7"></div>
				<div class="l_shiled4"></div>
			</div>
		</div>
	</body>
</html>

css代码

/* 第一单元项目1-1使用HTML+css3绘制logo */
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;
	
}
.d_shile1,.d_shile2,.d_shile3,.d_shile4,.d_shile5,.d_shile6,.d_shiled7{
	background:#e15016;
}
.d_shile1{
	left: 32px;
	width: 140px;
	height:346px;
}
.d_shile2{
	transform: skewX(5deg);
	left: 16px;
	width: 100px;
	height:346px;
}
.d_shile3{
	transform: skewY(15deg);
	top: 265px;
	left: 32px;
	width: 140px;
	height:100px;
}
.d_shile4{
	left:172px;
	width:140px;
	height:346px;
}
.d_shile5{
	transform: skewX(-5deg);
	left:227px;
	width:100px;
	height:346px;
}
.d_shile6{
	transform: skewY(-15deg);
	top:265px;
	left:172px;
	width:140px;
	height:100px;
	}
	.d_shiled7{
		height: 20px;
		top: 199px;
		width: 80px;
		left: 60px;
	}
	.l_shiled1,.l_shiled2,.l_shiled3,.l_shiled4{
		background: #ee6812;
	}
.l_shiled1{
	left: 172px;
	width: 140px;
	height: 346px;
}
.l_shiled2{
	transform:skewX(-5deg);
	left: 227px;
	width: 100px;
	height: 363px;
}
.l_shiled3{
	transform: skewY(-15deg);
	top:282px;
	left:172px;
	width:138px;
	height:100px;
}
.l_shiled4{
	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);
}

运行结果：

在这里插入图片描述
ps：某一part的色块有误，我没去找，有小伙伴找到留言告诉我呀！

shaooohua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【web前端】H5图片制作

H5图标制作point：css的内嵌和外链式h5和css的简单应用h5代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML5 logo</title> <link href="logo.css" type="text/css" rel="stylesheet"> </head> <body>
复制链接

扫一扫