div+css布局实现塔吊效果代码-html代码-BFW代码库

div+css布局实现塔吊效果代码

代码语言：html

代码描述：div+css布局实现塔吊效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
*,*::before,*::after {
	box-sizing:border-box
}
body {
	background-color:#666
}
#crane {
	height:220px;
	left:50%;
	margin-left:-75px;
	margin-top:-110px;
	position:absolute;
	top:50%;
	transform:scale(1);
	width:150px
}
#peak {
	height:0
}
#peak #first {
	border:3px solid #ffa449;
	display:block;
	height:18px;
	left:7px;
	position:absolute;
	top:-16px;
	width:18px
}
#peak #first::before {
	background:linear-gradient(to right,#f8b74b 0,#fca546 50%,#ff8036 100%);
	content:"";
	display:block;
	height:20px;
	left:5px;
	position:relative;
	top:-4px;
	transform:rotate(45deg);
	width:3px;
	z-index:-1
}
#peak #first::after {
	background:linear-gradient(to right,#f8b74b 0,#fca546 50%,#ff8036 100%);
	content:"";
	display:block;
	height:20px;
	left:4px;
	position:relative;
	top:-24px;
	transform:rotate(135deg);
	width:3px;
	z-index:-1
}
#peak #second {
	background-color:#ffa449;
	height:26px;
	left:13px;
	position:absolute;
	top:-42px;
	width:6px
}
#peak #second::before {
	background-color:#ffa449;
	content:"";
	display:block;
	height:16px;
	left:-4px;
	position:absolute;
	top:10px;
	width:14px;
	border-left:2px solid #ffbe7c;
	border-right:2px solid #fc7e00;
	border-style:none solid;
	border-width:medium 2px
}
#peak #light {
	background-color:red;
	border-radius:50% 50% 0 0;
	height:4px;
	left:14px;
	position:absolute;
	top:-46px;
	width:4px;
	-webkit-animation:lightFlash 2s linear infinite;
	animation:lightFlash 2s linear infinite
}
#peak span {
	background-color:#666;
	display:block;
	height:2px;
	left:15px;
	position:relative;
	top:-39px;
	width:2px;
	margin-bottom:3px
}
#peak #line1 {
	background-color:black;
	height:1px;
	left:19px;
	position:absolute;
	top:-42px;
	transform:rotate(6deg);
	transform-origin:left center 0;
	width:185px
}
#peak #line2 {
	background-color:black;
	height:1px;
	left:12px;
	position:absolute;
	top:-42px;
	transform:rotate(155deg);
	transform-origin:left center 0;
	width:93px;
	z-index:-1
}
#arm {
	width:260px
}
#arm #connector1 {
	background-color:#ffa449;
	display:block;
	height:6px;
	left:35px;
	positio.........完整代码请登录后点击上方下载按钮下载查看