css实现一个自适应学校教学楼建筑效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现一个自适应学校教学楼建筑效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          flex-direction: column;
          height: 100vh;
          background: #80cec1;
        }
        
        .body {
          position: relative;
          z-index: 1;
          width: calc(72 * 1.3vmin);
          height: calc(35 * 1.3vmin);
          display: flex;
          align-items: center;
          justify-content: flex-end;
          flex-direction: column;
        }
        
        .base {
          width: 100%;
          height: calc(19 * 1.3vmin);
          background: #ffd04c;
        }
        
        .roof {
          border-bottom: calc(6 * 1.3vmin) solid #545454;
          border-left: calc(4 * 1.3vmin) solid transparent;
          border-right: calc(4 * 1.3vmin) solid transparent;
          height: 0;
          width: calc(100% - 10 * 1.3vmin);
          position: relative;
          display: flex;
          justify-content: space-around;
        }
        .roof .chimney {
          position: absolute;
          width: calc(2 * 1.3vmin);
          height: calc(2.5 * 1.3vmin);
          background: #6e6e6e;
          bottom: 0;
        }
        .roof .chimney:before {
          content: "";
          position: absolute;
          bottom: 0;
          left: calc(-0.25 * 1.3vmin);
          background: #545454;
          width: calc(2.5 * 1.3vmin);
          height: calc(0.5 * 1.3vmin);
        }
        .roof .chimney:after {
          content: "";
          position: absolute;
          top: 0;
          left: calc(-0.25 * 1.3vmin);
          background: #7a7a7a;
          width: calc(2.5 * 1.3vmin);
          height: calc(0.5 * 1.3vmin);
        }
        .roof .chimney1 {
          left: calc(7 * 1.3vmin);
        }
        .roof .chimney2 {
          left: calc(20 * 1.3vmin);
        }
        .roof .chimney3 {
          right: calc(20 * 1.3vmin);
        }
        .roof .chimney4 {
          right: calc(7 * 1.3vmin);
        }
        
        .tower {
          width: calc(9 * 1.3vmin);
          height: calc(22 * 1.3vmin);
          background: #fdc147;
          position: absolute;
          bottom: 0;
          z-index: 1;
        }
        .tower.tower1 {
          left: 0;
        }
        .tower.tower2 {
          right: 0;
        }
        .tower .towerRoof {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 calc(5 * 1.3vmin) calc(5 * 1.3vmin) calc(5 * 1.3vmin);
          border-color: transparent transparent #6e6e6e transparent;
          position: absolute;
          top: calc(-5 * 1.3vmin);
          left: calc(-0.5 * 1.3vmin);
        }
        .tower .towerRoof .spike {
          position: absolute;
          left: calc(-0.25 * 1.3vmin);
          bottom: calc(-0.25 * 1.3vmin);
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 calc(0.25 * 1.3vmin) calc(1.5 * 1.3vmin) calc(0.25 * 1.3vmin);
          border-color: transparent transparent #6e6e6e transparent;
        }
        .tower .towerRoof .window {
          position: absolute;
          bottom: calc(-4 * 1.3vmin);
          left: calc(-0.75 * 1.3vmin);
          width: calc(1.5 * 1.3vmin);
          height: calc(2 * 1.3vmin);
          background: #474747;
          border: calc(0.25 * 1.3vmin) solid #fff5cf;
          opacity: 0.8;
        }
        .tower .towerRoof .window:before {
          content: "";
          position: absolute;
          height: calc(0.25 * 1.3vmin);
          width: 100%;
          background: #fff5cf;
          left: 0;
          top: calc(0.625 * 1.3vmin);
        }
        .tower .towerRoof .window:after {
          content: "";
          position: absolute;
          width: calc(0.25 * 1.3vmin);
          height: 100%;
          background: #fff5cf;
          left: calc(0.375 * 1.3vmin);
          top: 0;
        }
        
        .towerBase {
          position: absolute;
          height: 100%;
          width: 100%;
        }
        .towerBase .floor {
          height: calc(7.3 * 1.3vmin);
          width: 100%;
          position: relative;
        }
        .towerBase .floor1:before {
          content: "";
          position: absolute;
          height: calc(0.5 * 1.3vmin);
          width: 100%;
          background: #f5a21c;
        }
        .towerBase .floor2:before {
          content: "";
          position: absolute;
          top: calc(-0.5 * 1.3vmin);
          height: calc(0.75 * 1.3vmin);
          width: 100%;
          background: #f5a21c;
        }
        .towerBase .floor3:before {
          content: "";
          position: absolute;
          top: calc(-0.5 * 1.3vmin);
          height: calc(0.75 * 1.3vmin);
          width: 100%;
          background: #f5a21c;
        }
        .towerBase .towerWindow {
          position: absolute;
          top: calc(1 * 1.3vmin);
          left: calc(2 * 1.3vmin);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          width: calc(5 * 1.3vmin);
          height: calc(5 * 1.3vmin);
          border: calc(0.5 * 1.3vmin) solid #fff5cf;
        }
        .towerBase .towerWindow:before {
          content: "";
          position: absolute;
          width: calc(4.8 * 1.3vmin);
          height: calc(4.8 * 1.3vmin);
          border: 5px dotted #fff5cf;
          border-top: none;
          border-bottom: none;
        }
        .towerBase .towerWindow .window {
          width: 50%;
          height: 50%;
          display: flex;
          background: #545454;
        }
        .towerBase .towerWindow .window:nth-of-type(1) {
          border: calc(0.25 * 1.3vmin) solid #fff5cf;
          border-top: none;
          border-left: none;
        }
        .towerBase .towerWindow .window:nth-of-type(2) {
          border: calc(0.25 * 1.3vmin) solid #fff5cf;
          border-top: none;
          border-right: none;
        }
        .towerBase .towerWindow .window:nth-of-type(3) {
          border: calc(0.25 * 1.3vmin) solid #fff5cf;
          border-bottom: none;
          border-left: none;
        }
        .towerBase .towerWindow .window:nth-of-type(4) {
          border: calc(0.25 * 1.3vmin) solid #fff5cf;
          b.........完整代码请登录后点击上方下载按钮下载查看