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;
          border-bottom: none;
          border-right: none;
        }
        .towerBase .towerWindow .window span {
          width: 50%;
          height: 100%;
          display: block;
          position: relative;
        }
        .towerBase .towerWindow .window span:nth-of-type(1) {
          border-right: calc(0.125 * 1.3vmin) solid #fff5cf;
        }
        .towerBase .towerWindow .window span:nth-of-type(2) {
          border-left: calc(0.125 * 1.3vmin) solid #fff5cf;
        }
        .towerBase .towerWindow .window span:before {
          content: "";
          position: absolute;
          height: calc(0.0675 * 1.3vmin);
          width: 100%;
          background: #fff5cf;
          left: 0;
          top: calc(0.825 * 1.3vmin);
        }
        
        .base {
          position: relative;
          display: flex;
          align-items: flex-end;
          padding: 0 calc(9 * 1.3vmin);
        }
        .base:before {
          content: "";
          top: calc(-0.6 * 1.3vmin);
          left: 0;
          position: absolute;
          width: 100%;
          height: calc(1.2 * 1.3vmin);
          background: linear-gradient(#fff 60%, rgba(255, 255, 255, 0.5) 60%);
        }
        .base .section {
          height: 100%;
          background: #ffb32a;
        }
        .base .section.section1, .base .section.section3 {
          width: calc(16 * 1.3vmin);
        }
        .base .section.section2 {
          width: calc(100% - (2 * (16 * 1.3vmin)));
        }
        .base .section .floor1 {
          height: calc(100% - 2 * (7.3 * 1.3vmin));
          width: 100%;
        }
        .base .section .floor2 {
          height: calc(7.3 * 1.3vmin);
          width: 100%;
          position: relative;
        }
        .base .section .floor2:before {
          content: "";
          position: absolute;
          top: calc(-0.5 * 1.3vmin);
          height: calc(0.75 * 1.3vmin);
          width: 100%;
          background: #f5a21c;
        }
        .base .section .floor3 {
          height: calc(7.3 * 1.3vmin);
          width: 100%;
          position: relative;
        }
        .base .section .floor3:before {
          content: "";
          position: absolute;
          top: calc(-0.5 * 1.3vmin);
          height: calc(0.75 * 1.3vmin);
          width: 100%;
          background: #f5a21c;
        }
        .base .section .floor {
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
        .base .section .floor .window {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          width: calc(2.5 * 1.3vmin);
          height: calc(5 * 1.3vmin);
          border: calc(0.5 * 1.3vmin) solid #fff5cf;
          position: relative;
          background: #545454;
        }
        .base .section .floor .window:before {
          content: "";
          position: absolute;
          height: 100%;
          width: calc(0.25 * 1.3vmin);
          background: #fff5cf;
          left: calc(0.625 * 1.3vmin);
          top: 0;
        }
        .base .section .floor .window:after {
          content: "";
          position: absolute;
          height: calc(0.25 * 1.3vmin);
          width: 100%;
          background: #fff5cf;
          left: 0;
          top: calc(2 * 1.3vmin);
        }
        .base .section.section1 .floor1, .base .section.section3 .floor1 {
          position: relative;
        }
        .base .section.section1 .floor1 .window, .base .section.section3 .floor1 .window {
          top: calc(-1.5 * 1.3vmin);
        }
        .base .section.section1 .windowSmall, .base .section.section3 .windowSmall {
          position: absolute;
        }
        .base .section .windowSmall {
          width: calc(1.5 * 1.3vmin);
          height: calc(2 * 1.3vmin);
          background: #474747;
          border: calc(0.25 * 1.3vmin) solid #fff5cf;
          opacity: 0.8;
        }
        .base .section .windowSmall:before {
          content: "";
          position: absolute;
          height: calc(0.25 * 1.3vmin);
          width: 100%;
          background: #fff5cf;
          left: 0;
          top: calc(0.625 * 1.3vmin);
        }
        .base .section .windowSmall:after {
          content: "";
          position: absolute;
          width: calc(0.25 * 1.3vmin);
          height: 100%;
          background: #fff5cf;
          left: calc(0.375 * 1.3vmin);
          top: 0;
        }
        .base .section .windowSmall.windowSmall1 {
          bottom: calc(1.2 * 1.3vmin);
          left: calc(1.8 * 1.3vmin);
        }
        .base .section .windowSmall.windowSmall2 {
          bottom: calc(1.2 * 1.3vmin);
          right: calc(1.8 * 1.3vmin);
        }
        .base .section.section2 .windowSmall {
          position: relative;
        }
        .base .section.section2 .windowPlaceholder,
        .base .section.section2 .windowWrapper {
          width: calc(4.5 * 1.3vmin);
        }
        .base .section.section2 .centerWindow {
          top: calc(-2 * 1.3vmin);
          left: calc(0.25 * 1.3vmin);
          width: calc(4 * 1.3vmin);
          height: calc(9 * 1.3vmin);
          border: calc(0.5 * 1.3vmin) solid #fff5cf;
          position: relative;
          background: #545454;
          border-top-right-radius: calc(3 * 1.3vmin);
          border-top-left-radius: calc(3 * 1.3vmin);
        }
        .base .section.section2 .centerWindow .v {
          position: absolute;
          top: 0;
          left: calc(1.4 * 1.3vmin);
          width: calc(0.25 * 1.3vmin);
          height: 100%;
          background: #fff5cf;
        }
        .base .section.section2 .centerWindow .h {
          position: absolute;
          left: 0;
          width: 100%;
          height: calc(0.25 * 1.3vmin);
          background: #fff5cf;
        }
        .base .section.section2 .centerWindow .h.h1 {
          top: calc(2 * 1.3vmin);
        }
        .base .section.section2 .centerWindow .h.h2 {
          top: calc(4 * 1.3vmin);
        }
        .base .section.section2 .centerWindow .h.h3 {
          bottom: calc(2 * 1.3vmin);
        }
        .base .section.section2 .doors {
          position: relative;
          top: calc(0.6 * 1.3vmin);
          width: calc(4.5 * 1.3vmin);
          height: calc(6 * 1.3vmin);
        }
        .base .section.section2 .doors:before {
          content: "";
          position: absolute;
          top: calc(-0.5 * 1.3vmin);
          left:.........完整代码请登录后点击上方下载按钮下载查看