css实现一个自适应学校教学楼建筑效果代码
代码语言：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: calc(-0.5 * 1.3vmin);
z-index: 0;
background: #fff;
width: calc(5.5 * 1.3vmin);
height: calc(6.5 * 1.3vmin);
border-top-right-radius: calc(3 * 1.3vmin);
border-top-left-radius: calc(3 * 1.3vmin);
}
.base .section.section2 .doors:after {
content: "";
position: absolute;
z-index: 1;
background: #ffe499;
width: calc(4.5 * 1.3vmin);
height: calc(6 * 1.3vmin);
border-top-right-radius: calc(3 * 1.3vmin);
border-top-left-radius: calc(3 * 1.3vmin);
}
.base .section.section2 .doors span {
position: absolute;
left: 50%;
top: 0;
width: calc(0.125 * 1.3vmin);
height: 100%;
background: #545454;
z-index: 2;
top: 0;
}
.base .section.section2 .doors span:after {
content: "";
position: absolute;
width: calc(0.5 * 1.3vmin);
height: calc(0.5 * 1.3vmin);
border-radius: 50%;
left: 1.3vmin;
top: calc(3 * 1.3vmin);
background: #545454;
}
.base .section.section2 .doors span:before {
content: "";
position: absolute;
width: calc(0.5 * 1.3vmin);
height: calc(0.5 * 1.3vmin);
border-radius: 50%;
right: 1.3vmin;
top: calc(3 * 1.3vmin);
background: #545454;
}
.base .miniTower {
position: absolute;
top: calc(-2.5 * 1.3vmin);
left: calc(5.5 * 1.3vmin);
width: calc(5 * 1.3vmin);
height: calc(6 * 1.3vmin);
background: #fdb22a;
}
.base .miniTower:before {
content: "";
position: absolute;
top: calc(-2.5 * 1.3vmin);
width: 0;
height: 0;
border-style: solid;
border-width: 0 calc(2.5 * 1.3vmin) calc(2.5 * 1.3vmin) calc(2.5 * 1.3vmin);
border-color: transparent transparent #fdb22a transparent;
z-index: 3;
}
.base .miniTower:after {
content: "";
position: absolute;
top: calc(-3 * 1.3vmin);
left: calc(-0.5 * 1.3vmin);
width: 0;
height: 0;
border-style: solid;
border-width: 0 calc(3 * 1.3vmin) calc(3 * 1.3vmin) calc(3 * 1.3vmin);
border-color: transparent transparent #6e6e6e transparent;
z-index: 2;
}
.front .triangle {
position: absolute;
top: calc(8.5 * 1.3vmin);
left: calc(50% - 10 *1.3vmin);
}
.front .triangle .tr1 {
position: absolute;
top: calc(-0.5 * 1.3vmin);
left: calc(-2 * 1.3vmin);
width: 0;
height: 0;
border-style: solid;
border-width: 0 calc(12 * 1.3vmin) calc(7 * 1.3vmin) calc(12 * 1.3vmin);
border-color: transparent transparent #fff transparent;
z-index: 1;
}
.front .triangle .tr2 {
position: absolute;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 calc(10 * 1.3vmin) calc(6 * 1.3vmin) calc(10 * 1.3vmin);
border-color: transparent transparent #ffc319 transparent;
z-index: 2;
}
.front .triangle .tr3 {
position: absolute;
top: calc(1 * 1.3vmin);
left: calc(2 * 1.3vmin);
width: 0;
height: 0;
border-style: solid;
border-width: 0 calc(8 * 1.3vmin) calc(5 * 1.3vmin) calc(8 * 1.3vmin);
border-color: transparent transparent #ffd04c transparent;
z-index: 3;
}
.front .triangle .clock {
width: calc(3 * 1.3vmin);
height: calc(3 * 1.3vmin);
border-radius: 50%;
border: calc(0.25 * 1.3vmin) solid #545454;
background: #fff;
position: absolute;
left: calc(8.5 * 1.3vmin);
top: calc(2 * 1.3vmin);
z-index: 5;
}
.front .triangle .clock .clockHand1 {
width: 1.3vmin;
height: calc(0.25 * 1.3vmin);
background: #545454;
position: absolute;
top: calc(50% - 0.25 * 1.3vmin);
left: calc(50% - 0 * 1.3vmin);
transform-origin: left;
transform: rotate(15deg);
}
.front .triangle .clock .clockHand2 {
width: 1.3vmin;
height: calc(0.25 * 1.3vmin);
background: #545454;
position: absolute;
top: calc(50% - 0.25 * 1.3vmin);
left: calc(50% - 0 * 1.3vmin);
transform-origin: left;
transform: rotate(135deg);
}
.front .mainTower {
position: absolute;
top: calc(4 * 1.3vmin);
left: calc(50% - 2.5 * 1.3vmin);
width: calc(5 * 1.3vmin);
height: calc(6 * 1.3vmin);
background: #ffd04c;
}
.front .mainTower:before {
content: "";
top: 0;
left: calc(-0.5 * 1.3vmin);
position: absolute;
width: calc(100% + 1.3vmin);
height: calc(0.8 * 1.3vmin);
background: linear-gradient(#fff 60%, rgba(255, 255, 255, 0.5) 60%);
}
.front .mainTower .windowSmall {
position: absolute;
top: calc(1.5 * 1.3vmin);
left: calc(1.5 * 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;
}
.front .mainTower .windowSmall:before {
content: "";
position: absolute;
height: calc(0.25 * 1.3vmin);
width: 100%;
background: #fff5cf;
left: 0;
top: calc(0.625 * 1.3vmin);
}
.front .mainTower .windowSmall:after {
content: "";
position: absolute;
width: calc(0.25 * 1.3vmin);
height: 100%;
background: #fff5cf;
left: calc(0.375 * 1.3vmin);
top: 0;
}
.front .towerRoof {
width: 0;
height: 0;
border-style: solid;
border-width: 0 calc(2.5 * 1.3vmin) calc(2 * 1.3vmin) calc(2.5 * 1.3vmin);
position: absolute;
top: calc(-2 * 1.3vmin);
border-color: tran.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0