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.........完整代码请登录后点击上方下载按钮下载查看