div+css绘制埃菲尔铁塔效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css绘制埃菲尔铁塔效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background: #68e3ff;
}

.canvas {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ground {
    background: #d2d2d2;
    height: 100px;
    display: flex;
    justify-content: space-between;
    column-gap: 240px;
    z-index: 1;
}

.ground:before, .ground:after {
    background: green;
    flex: 1;
    content: "";
    border-radius: 0 0 100px 0 / 0 0 100px 0;
}

.ground:after {
    transform: scale(-1, 1);
}

.non_ground {
    flex: 4;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    column-gap: 20px;
    z-index: 2;
}

.tower {
    display: flex;
    justify-content: flex-start;
    flex-direction: column-reverse;
    align-items: center;
    width: 400px;
    height: 100%;
    /*border: 1px solid black;*/
    --color: #ebf5ff;
    --color_dark: #ffffff;
}

.base, .middle, .top {
    display: flex;
    align-items: stretch;
    justify-content: center;
    position: relative;
}

.base {
    column-gap: 180px;
    position: relative;
    z-index: 0;
}

.base_side {
    width: 60px;
    height: 140px;
    border: 7px solid var(--color_dark);
    border-top: 0;
    --offset1: 5px;
    --offset2: 32px;
    --skew_offset: 24deg;
    /*background: var(--color);*/
    background: repeating-linear-gradient(45deg, var(--color) 0px, var(--color) var(--offset1), transparent var(--offset1), transparent var(--offset2)),
    repeating-linear-gradient(-45deg, var(--color) 0px, var(--color) var(--offset1), transparent var(--offset1), transparent var(--offset2)),
    linear-gradient(90deg, transparent 44%, var(--color) 44%, var(--color) 56%, transparent 56%),
    repeating-linear-gradient(180deg, var(--color) 0px, var(--color) calc(var(--offset1) / 1.41421356237), transparent calc(var(--offset1) / 1.41421356237), transparent calc(var(--offset2) / 1.41421356237));
    background-position: 0, 0, 0, 0px -6px;
    transform: skewX(calc(0deg - var(--skew_offset)));
    /*filter: drop-shadow(1px 1px 5px black);*/
}

.base_side.right {
    transform: skewX(var(--skew_offset));
}

.lower_post {
    width: 237px;
    height: 50px;
    /*background: var(--color);*/
    transform-origin: 50% 100%;
    transform: perspective(100px) rotateX(15deg);
    border: 6px solid var(--color_dark);
    top: -2px;
    --offset1: 7px;
    --offset2: 29px;
    --skew_offset: 24deg;
    background: repeating-linear-gradient(45deg, var(--color) 0px, var(--color) var(--offset1), transparent var(--offset1), transparent var(--offset2)),
    repeating-linear-gradient(-45deg, var(--color) 0px, var(--color) var(--offset1), transparent var(--offset1), transparent var(--offset2)),
    repeating-linear-gradient(90deg, var(--color) 0px, var(--color) calc(var(--offset1) / 1.41421356237), transparent calc(var(--offset1) / 1.41421356237), transparent calc(var(--offset2) / 1.41421356237)),
    repeating-linear-gradient(180deg, var(--color) 0px, var(--color) calc(var(--offset1) / 1.41421356237), transparent calc(var(--offset1) / 1.41421356237), transparent calc(var(--offset2) / 1.41421356237));
    background-position: 0, 0, -12px -4px, 0px 0px;

}


.base_arc {
    position: absolute;
    align-self: flex-end;
    width: 260px;
    aspect-ratio: 1/1;
    /*border: 15px solid #CFA678;*/
    background: radial-gradient(transparent 62%, var(--color_dark) 62%, var(--color_dark) 64%, var(--color) 64%, var(--color) 69%, var(--color_dark) 69%);
    transform: translateY(50%);
    clip-path: polygon(25% 0%, 75% 0%, 92% 40%, 8% 40%);
    border-radius: 50%;
    z-index: -1;
}

.middle {
    position: relative;
    column-gap: 74px;
    z-index: 0;
}

.middle:before, .middle:after {
    content: "";
    display: block;
    position: absolute;
    width: 210px;
    height: 5px;
    background: var(--color);
    border: 5px solid var(--color_dark);
    z-index: -1;
    bottom: 0;
    transform: translateY(100%);
    border-radius: 10px;
}

.middle:after {
    bottom: 20px;
    z-index: 2;
}

.middle_side {
    width: 50px;
    height: 100px;
    --offset1: 5px;
    --offset2: 33px;
    --skew_offset: 24deg;
    background: repeating-linear-gradient(45deg, var(--color) 0px, var(--color) var(--offset1), transparent var(--offset1), transparent var(--offset2)),
    repeating-linear-gradient(-45deg, var(--color) 0px, var(--color) var(--offset1), transparent var(--offset1), transparent var(--offset2)),
    repeating-linear-gradient(180deg, var(--color) 0px, var(--color) calc(var(--offset1) / 1.41421356237), transparent calc(var(--offset1) / 1.41421356237), transparent calc(var(--offset2) / 1.41421356237)),
    linear-gradient(90deg, transparent 42%, var(--color) 42%, var(--color) 58%, transparent 58%);
    background-position: 0, 0, 0 -3px;
    border: 6px solid var(--color_dark);
    border-bottom: 0;
    border-top: 0;
    transform: skewX(-12deg);
}

.middle_side.right {
    transform: skewX(12deg);
}

.higher_post {
    width: 160px;
    height: 40px;
    background: var(--color);
    transform-origin: 50% 100%;
    transform: perspective(100px) rotateX(10deg);
    border: 6px solid var(--color_dark);
    top: -2px;
    --offset1: 5px;
    --offset2: 16px;
    --skew_offset: 24deg;
    background: repeating-linear-gradient(45deg, var(--color) 0px, var(--color) var(--offset1), transparent var(--offset1), transparent var(--offset2)),
    repeating-linear-gradient(-45deg, var(--color) 0px, var(--color) var(--offset1), transparent var(--offset1), transparent var(--offset2));
    background-position: 0, 0, 0;
}

.top {
    column-gap: 0px;
    filter: drop-shadow(5px 0px var(--color_dark)) drop-shadow(-5px 0px var(--color_dark));
}

.top:before, .top:after {
    content: "";
    display: block;
    position: absolute;
    width: 150px;
    height: 5px;
    background: var(--color);
   .........完整代码请登录后点击上方下载按钮下载查看