div+css布局实现哈利波特中霍格沃茨魔法学院效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css布局实现哈利波特中霍格沃茨魔法学院效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        .hogwarts {
          position: relative;
          width: 650px;
          max-width: 98vw;
          min-width: 150px;
          margin: auto;
          aspect-ratio: 1/1;
          overflow: visible;
        }
        @supports not (aspect-ratio: 1/1) {
          .hogwarts {
            width: 80vw;
            height: 80vw;
          }
        }
        .hogwarts .tour {
          width: 10%;
          height: 40%;
          top: 37%;
          left: 35%;
          position: absolute;
          background: #e6c88c;
          background: #e6c88c;
          background: linear-gradient(to right, #e1bc74, #e6c88c 20%, #e6c88c);
          box-shadow: inset -5px 3px 5px 5px rgba(255, 255, 255, 0.5);
        }
        .hogwarts .tour .triangle {
          position: absolute;
          top: -65%;
          left: 50%;
          width: 135%;
          height: 67%;
          background: #353535;
          transform: translateX(-50%);
          z-index: 4;
          clip-path: polygon(50% 0%, 100% 100%, 100% 100%, 100% 100%, 75% 98%, 50% 98%, 25% 98%, 0 100%, 0 100%, 0 100%);
          box-shadow: inset -15px 3px 5px 5px rgba(255, 255, 255, 0.5);
        }
        .hogwarts .tour .top {
          position: absolute;
          top: 0;
          left: 50%;
          width: 100%;
          height: 15%;
          transform: translateX(-50%);
          z-index: 4;
          box-shadow: 0px 10px 7px -1px rgba(1, 1, 1, 0.1);
        }
        .hogwarts .tour .top::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: -1;
          width: 125%;
          height: 115%;
          transform: translateX(-10%);
          background: #e6c88c;
          clip-path: polygon(0 1%, 100% 0, 100% 100%, 75% 94%, 25% 94%, 0 100%);
          box-shadow: inset -15px 0px 5px 0px rgba(255, 255, 255, 0.5), inset 0px 7px 2px -1px rgba(1, 1, 1, 0.3);
        }
        .hogwarts .tour .subtour {
          border-radius: 0 0 10% 40%;
          width: 19%;
          height: 13%;
          top: -42%;
          left: -36%;
          position: absolute;
          background: #e6c88c;
          z-index: 1;
          box-shadow: inset -3px 1px 5px 1px rgba(255, 255, 255, 0.5);
        }
        .hogwarts .tour .subtour .triangle {
          box-shadow: inset -5px 1px 5px 1px rgba(255, 255, 255, 0.5);
        }
        .hogwarts .tour .subtour:nth-child(4) {
          top: -36%;
          left: -1%;
          z-index: 3;
        }
        .hogwarts .tour .subtour:nth-child(3) {
          top: -39%;
          left: -20%;
          z-index: 2;
        }
        .hogwarts .tour .accroche {
          width: 19%;
          height: 13%;
          top: -24%;
          left: -4%;
          z-index: 3;
          position: absolute;
          background: #e6c88c;
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 20%);
          box-shadow: inset -3px 1px 5px 1px rgba(255, 255, 255, 0.5);
        }
        .hogwarts .tour3 {
          width: 5%;
          height: 19%;
          top: 53%;
          left: 67%;
        }
        .hogwarts .tour2 {
          z-index: 5;
          width: 7%;
          height: 22%;
          top: 51%;
          left: 82%;
          box-shadow: inset -2px 2px 5px 2px rgba(255, 255, 255, 0.5), 0px 10px 7px -1px rgba(1, 1, 1, 0.1), -2px 0 5px 0 rgba(1, 1, 1, 0.2);
        }
        .hogwarts .tour1 {
          z-index: 4;
          width: 10%;
          height: 40%;
          top: 37%;
          left: 35%;
        }
        .hogwarts .tour4 {
          width: 6%;
          height: 19%;
          top: 61%;
          left: 55%;
        }
        .hogwarts .tour4 .triangle {
          height: 80%;
          top: -78%;
        }
        .hogwarts .tour5 {
          width: 3%;
          height: 26%;
          top: 53%;
          left: 89%;
        }
        .hogwarts .tour5 .triangle {
          box-shadow: inset -5px 3px 5px 5px rgba(255, 255, 255, 0.5);
        }
        .hogwarts .tour6 {
          width: 3%;
          height: 26%;
          top: 54.6%;
          left: 73%;
        }
        .hogwarts .tour6 .triangle {
          box-shadow: inset -5px 3px 5px 5px rgba(255, 255, 255, 0.5);
        }
        .hogwarts .tour7 {
          width: 1.6%;
          height: 9%;
          top: 57%;
          left: 61.5%;
          background: #e1bc74;
          border-radius: 0 0 30% 30%;
        }
        .hogwarts .tour7 .triangle {
          box-shadow: none;
        }
        .hogwarts .tour8 {
          width: 1.6%;
          height: 5%;
          top: 56%;
          left: 53.5%;
          background: #e1bc74;
          border-radius: 0 0 30% 30%;
        }
        .hogwarts .tour8 .triangle {
          box-shadow: none;
        }
        .hogwarts .tour9 {
          width: 1.6%;
          height: 9%;
          top: 48%;
          left: 11%;
          background: #e1bc74;
          border-radius: 0 0 30% 30%;
        }
        .hogwarts .tour9 .triangle {
          box-shadow: none;
        }
        .hogwarts .tour,
        .hogwarts .top {
          display: flex;
          flex-direction: column-reverse;
          justify-content: space-evenly;
        }
        .hogwarts .tour .etage,
        .hogwarts .top .etage {
          display: flex;
          justify-content: space-around;
        }
        .hogwarts .tour .etage .window,
        .hogwarts .top .etage .window {
          box-shadow: inset -1px 0px 2px 0px rgba(255, 255, 255, 0.5);
          background: black;
          width: 6%;
          aspect-ratio: 1/1;
        }
        @supports not (aspect-ratio: 1/1) {
          .hogwarts .tour .etage .window,
        .hogwarts .top .etage .window {
            width: 3px;
            height: 3px;
          }
        }
        .hogwarts .tour .etage .window:nth-child(2),
        .hogwarts .top .etage .window:nth-child(2) {
          transform: translateY(-50%);
        }
        .hogwarts .batiment {
          position: absolute;
        }
        .hogwarts .batiment .roof {
          position: absolute;
          background: #353535;
          top: 0;
          left: 5%;
          width: 75%;
          height: 29%;
          transform: skew(-17deg, 2deg);
        }
        .hogwarts .batiment .facade {
          position: absolute;
          background: #e1bc74;
          bottom: 0;
          left: 0;
          width: 79%;
          height: 71%;
          transform: skew(4deg, 2deg);
          display: flex;
          justify-content: space-between;
        }
        .hogwarts .batiment .facade .pillar {
          border-radius: 30% 20% 0 0;
          width: calc(100% / 24);
          height: 105%;
          transform: translateY(-5%);
          background: linear-gradient(to right, #e1bc74, #e6c88c 50%, #e6c88c);
          box-shadow: inset -1px 0px 2px 0px rgba(255, 255, 255, 0.5), -1px 0 2px 0px rgba(1, 1, 1, 0.2);
        }
        .hogwarts .batim.........完整代码请登录后点击上方下载按钮下载查看