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

代码语言：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;
	position:absolute;
	top:-11px;
	transform:skewX(-45deg);
	width:10px;
	border-left:2px solid #fc7e00
}
#arm #connector2 {
	border-color:transparent transparent #ffa449;
	border-style:solid;
	border-width:0 0 17px 17px;
	display:block;
	height:0;
	left:38px;
	position:absolute;
	top:-24px;
	width:0
}
#arm section {
	border:3px solid #ffa449;
	float:left;
	height:16px;
	left:58px;
	margin-left:-3px;
	position:relative;
	top:-23px;
	width:16px
}
#arm section::after {
	background:linear-gradient(to right,#f8b74b 0,#fca546 50%,#ff8036 100%) repeat scroll 0 0 transparent;
	content:"";
	display:block;
	height:16px;
	left:4px;
	position:relative;
	top:-3px;
	transform:rotate(135deg);
	width:3px;
	z-index:-1
}
#arm #nose {
	border-color:transparent #666 transparent transparent;
	border-style:solid;
	border-width:0 20px 20px 0;
	display:block;
	height:0;
	left:250px;
	position:absolute;
	top:-25px;
	width:0
}
#arm #shine {
	background-color:#ffb163;
	display:block;
	height:2px;
	left:54px;
	position:absolute;
	top:-23px;
	width:199px;
	z-index:1
}
#arm #shadow {
	background-color:#fc7e00;
	display:block;
	height:2px;
	left:43px;
	position:absolute;
	top:-8px;
	width:223px;
	z-index:1
}
#tail {
	border-color:#ffa449 transparent #fc7e00;
	-o-border-image:none;
	border-image:none;
	border-style:solid;
	border-width:3px 0 2px;
	height:12px;
	left:-75px;
	position:absolute;
	top:-3px;
	width:85px;
	z-index:-1
}
#tail section {
	background:linear-gradient(to right,#fb7e00 0,#fb7e00 33%,#ffa449 33%,#ffa449 100%) repeat scroll 0 0 rgba(0,0,0,0);
	float:left;
	height:7px;
	margin-right:3px;
	width:6px
}
#tail #end {
	border-color:transparent #ffa449 transparent transparent;
	border-style:solid;
	border-width:0 13px 12px 0;
	display:block;
	height:0;
	left:-13px;
	position:absolute;
	top:-3px;
	width:0
}
#tail #end::after {
	border-color:transparent #666 transparent transparent;
	border-style:solid;
	border-width:0 7px 6px 0;
	content:"";
	display:block;
	height:0;
	left:5px;
	position:absolute;
	top:3px;
	width:0
}
#tail #weight {
	background:none repeat scroll 0 0 #ffa449;
	border-radius:25%;
	border-top:2px solid #ffbe7c;
	display:block;
	height:16px;
	left:-17px;
	position:absolute;
	top:-17px;
	width:18px
}
#tail #weight::after {
	background-color:#1e1b35;
	border-radius:0 0 25% 25%;
	content:"";
	display:block;
	height:5px;
	position:relative;
	top:9px;
	width:18px
}
#cable #line {
	background:none repeat scroll 0 0 black;
	height:140px;
	left:200px;
	position:absolute;
	top:-7px;
	width:1px
}
#cable #hook {
	font-family:"Rokkitt",sans-serif;
	font-size:1.25em;
	left:197px;
	position:absolute;
	top:125px;
	transform:rotate(182deg) rotateY(180deg)
}
#control-center #body {
	border-top:2px solid #fb7e00;
	background-color:#ffa449;
	height:25px;
	left:-10px;
	position:relative;
	transform:skewX(-10deg);
	width:50px
}
#control-center #body b {
	color:#af5800;
	font-family:verdana;
	font-size:.75em;
	font-weight:bold;
	opacity:.5;
	padding-left:4px
}
#control-center #cabin {
	background-color:#ffa449;
	border-left:2px solid #fc7e00;
	height:25px;
	left:25px;
	position:absolute;
	top:-5px;
	width:17px
}
#control-center #cabin::before {
	border-bottom:10px solid #ffa449;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	content:"";
	display:block;
	height:0;
	left:7px;
	position:relative;
	top:7.5px;
	transform:rotate(90deg) scale(1.01) translateZ(1px);
	width:25px
}
#control-center #cabin #window1 {
	background:none repeat scroll 0 0 black;
	display:block;
	height:18px;
	left:5px;
	position:relative;
	top:-6px;
	width:6px
}
#control-center #cabin #window2 {
	border-color:transparent transparent transparent black;
	border-style:solid;
	border-width:9px 0 0 9px;
	display:block;
	height:0;
	left:13px;
	position:absolute;
	top:3px;
	width:0
}
#control-center #cabin #window3 {
	border-color:black transparent transparent;
	border-style:solid;
	border-width:9px 9px 0 0;
	display:block;
	height:0;
	left:13px;
	position:absolute;
	top:14px;
	width:0
}
#control-center #cabin #window1,#control-center #cabin #window2,#control-center #cabin #window3 {
	opacity:.85
}
#control-center #barrier {
	background-color:#404040;
	display:block;
	height:2px;
	left:-14px;
	position:absolute;
	top:19px;
	width:45px
}
#control-center #barrier::before {
	background-color:#e27100;
	content:&qu.........完整代码请登录后点击上方下载按钮下载查看