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

代码语言:html

所属分类:布局界面

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

代码标签: 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 .batiment .facade .windows {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          flex-direction: column;
          gap: 12%;
          z-index: -1;
          padding-top: 5%;
        }
        .hogwarts .batiment .facade .windows .window {
          margin-top: 5px;
          height: 5%;
          width: 100%;
          background: rgba(1, 1, 1, 0.9);
        }
        .hogwarts .batiment .entree {
          position: absolute;
          top: 4%;
          right: -36%;
          width: 60%;
          height: 109%;
          border-radius: 50% 0 50% 0;
          transform: skew(5deg, 57deg);
          z-index: -1;
          background: linear-gradient(to right, #e1bc74, #e6c88c 5%, #e6c88c);
          box-shadow: 2px 0 5px 0 rgba(1, 1, 1, 0.4);
        }
        .hogwarts .batiment1 {
          z-index: 4;
          bottom: 26%;
          left: 7%;
          width: 35%;
          height: 24%;
          transform: rotateY(30deg) skew(-4deg, -2deg);
        }
        .hogwarts .batiment1 .facade .pillar:nth-child(1) {
          box-shadow: inset -1px 0px 2px 0px rgba(255, 255, 255, 0.5);
        }
        .hogwarts .batiment1 .entree {
          top: 4%;
          right: 8%;
          width: 17%;
          height: 109%;
        }
        .hogwarts .batiment2 {
          z-index: 4;
          bottom: 25%;
          left: 33.5%;
          width: 5%;
          height: 19%;
          transform: rotateY(30deg) skew(-4deg, -2deg);
        }
        .hogwarts .batiment2 .roof {
          box-shadow: -2px 0 5px 0 rgba(1, 1, 1, 0.2);
        }
        .hogwarts .batiment2 .facade {
          box-shadow: -2px 0 5px 0 rgba(1, 1, 1, 0.2);
        }
        .hogwarts .batiment2 .facade .pillar {
          width: 38%;
          position: absolute;
          right: -10%;
          bottom: 0;
          height: 110%;
        }
        .hogwarts .batiment2 .facade .windows {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          flex-direction: column;
          padding-top: 50%;
          padding-left: 18%;
        }
        .hogwarts .batiment2 .facade .windows .window {
          border-radius: 50% 50% 0% 0%/60% 60% 10% 10%;
          height: 50%;
          width: 50%;
          background: rgba(1, 1, 1, 0.9);
        }
        .hogwarts .batiment2 .entree {
          top: 4%;
          right: -36%;
          width: 60%;
          height: 109%;
        }
        .hogwarts .batiment3 {
          z-index: 4;
          bottom: 24%;
          left: 28%;
          width: 44%;
          height: 20%;
          transform: rotateY(30deg) skew(0deg, 0deg) rotateY(33deg);
        }
        .hogwarts .batiment3 .facade {
          box-shadow: 1px 0px 15px 1px rgba(1, 1, 1, 0.5);
          transform: skew(2deg, 3deg);
          background: linear-gradient(to right, #e1bc74, #e6c88c 5%, #e6c88c);
        }
        .hogwarts .batiment3 .facade .windows .window:nth-child(2) {
          transform: rotateZ(-1deg);
        }
        .hogwarts .batiment3 .facade .windows .window:nth-child(3) {
          transform: rotateZ(-1deg);
        }
        .hogwarts .batiment3 .roof {
          top: 2%;
          left: 2%;
          transform: skew(25deg, 5deg);
          box-shadow: inset -1px 0px 20px 0px rgba(255, 255, 255, 0.5);
        }
        .hogwarts .batiment4 {
          left: 68%;
          z-index: 4;
          bottom: 26%;
          width: 21%;
          height: 24%;
          transform: rotateY(30deg) skew(-4deg, -2deg);
        }
        .hogwarts .batiment4 .facade .pillar:nth-child(4) {
          opacity: 0;
        }
        .hogwarts .batiment4 .facade .troue {
          position: absolute;
          left: 40%;
          bottom: 0;
          background: black;
          width: 20%;
          height: 80%;
          transform: translateY(20%);
          border-radius: 50% 50% 0% 0%/30% 30% 10% 10%;
        }
        .hogwarts .fence {
          z-index: 5;
          position: absolute;
          left: 5%;
          bottom: 25%;
          width: 43%;
          height: 4%;
          transform: rotateZ(181deg) skew(1deg, 0deg);
          box-shadow: 0px 5px 50px 0 rgba(1, 1, 1, 0.1);
        }
        .hogwarts .fence .facade {
          display: flex;
          justify-content: space-between;
          height: 100%;
          border-bottom: 1px solid #00000011;
          box-shadow: inset 5px 0px 15px 0px rgba(255, 255, 255, 0.5);
          background: linear-gradient(to right, #e1bc74, #e6c88c);
        }
        .hogwarts .fence .facade .pillar {
          box-shadow: inset -1px 0px 5px 0px rgba(255, 255, 255, 0.5);
          width: 1%;
          max-width: 1%;
          background: black;
          height: 140%;
        }
        .hogwarts .fence2 {
          z-index: 5;
          position: absolute;
          left: 45%;
          bottom: 24.5%;
          width: 10%;
          height: 4%;
          transform: rotateZ(181deg) rotateY(56deg) skew(1deg, 0deg);
        }
        .hogwarts .fence2 .facade .pillar {
          width: 3%;
          max-width: 3%;
        }
        .hogwarts .rock {
          z-index: 5;
          position: absolute;
          left: 5%;
          bottom: 12%;
          width: 43%;
          height: 14%;
          transform: rotateZ(1deg) skew(1deg, 0deg);
          background: #643209;
          border-radius: 50% 50% 0% 100%/0% 0% 10% 35%;
          background: linear-gradient(to bottom, #643209, #5a2d08, #252964);
        }
        .hogwarts .rock2 {
          z-index: 5;
          left: 40%;
          bottom: 11.5%;
          width: 26%;
          height: 14%;
          transform: rotateZ(1deg) rotateY(63deg) skew(1deg, 0deg);
          clip-path: polygon(47% 0, 61% 4%, 77% 30%, 71% 45%, 80% 64%, 80% 84%, 100% 100%, 0 100%, 0 0, 22% 0);
          border-radius: 50% 50% 94% 0%/0% 58% 42% 0%;
        }
        .hogwarts .rock3 {
          left: 79%;
          bottom: 19%;
          width: 15%;
          height: 9%;
          box-shadow: inset -3px 5px 5px -1px rgba(255, 255, 255, 0.5);
          background: linear-gradient(to bottom, #643209, #5a2d08, #323278);
          border-radius: 50% 50% 94% 40%/10% 58% 42% 70%;
          clip-path: polygon(25% 0%, 100% 0, 100% 100%, 0 100%, 18% 68%, 15% 46%);
        }
        .hogwarts .rock4 {
          z-index: -1;
          left: 0;
          bottom: 14%;
          width: 50vw;
          height: 11%;
          transform: translateX(-90%);
          border-radius: 0 0 20% 0;
        }
        .hogwarts .pont {
          z-index: 5;
          background: linear-gradient(to right, #e1bc74, #e6c88c);
          position: absolute;
          left: 30%;
          bottom: 15%;
          height: 14%;
          width: 77%;
          transform: rotateY(69deg);
          clip-path: polygon(0 1%, 100% 8%, 100% 56%, 64% 75%, 20% 94%, 0 100%);
          display: flex;
          justify-content: space-evenly;
          border-top: 1px solid #000000;
        }
        .hogwarts .pont .troue {
          .........完整代码请登录后点击上方下载按钮下载查看

网友评论0