div+css布局实现哈利波特中霍格沃茨魔法学院效果代码
代码语言：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 .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 {
background: black;
width: 11%;
height: 83%;
transform: translateY(21%);
box-shadow: inset -5px 0px 20px 0px rgba(255, 255, 255, 0.5);
border-radius: 50% 50% 0% 0%/60% 60% 10% 10%;
}
.hogwarts .inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: translateY(-30%);
}
@keyframes twinkle {
0% {
transform: scale(2);
opacity: 1;
}
50% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(2);
opacity: 1;
}
}
@keyframes vague {
0% {
transform: translateY(0%) rotateZ(0deg);
}
25% {
transform: translateY(1%) rotateZ(1deg);
}
60% {
transform: translateY(3%) rotateZ(-1deg);
}
100% {
transform: translateY(0%) rotateZ(0deg);
}
}
.content {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: relative;
}
.content .ciel {
position: absolute;
top: 0;
width: 100%;
height: 52%;
background: #bedce3;
background-image: linear-gradient(to bottom, #bedce3, #6c7a89);
}
.content .ciel .star {
position: absolute;
background: linen;
height: 4px;
width: 4px;
border-radius: 50%;
animation: twinkle 5s infinite;
transition-timing-function: ease;
box-shadow: 0px 0px 5px 2px rgba(255, 255, 255, 0.25);
}
.content .ciel .star:nth-child(1) {
top: 50%;
left: 50%;
animation-duration: 7s;
}
.content .ciel .star:nth-child(2) {
top: 25%;
left: 30%;
animation-duration: 4s;
}
.content .ciel .star:nth-child(3) {
top: 15%;
left: 70%;
animation-duration: 7s;
}
.content .ciel .star:nth-child(4) {
top: 25%;
left: 14%;
}
.content .ciel .star:nth-child(5) {
top: 73%;
left: 4%;
}
.content .ciel .star:nth-child(6) {
height: 2px;
width: 2px;
top: 80%;
left: 65%;
animation-duration: 3s;
}
.content .ciel .star:nth-child(7) {
height: 3px;
width: 3px;
top: 60%;
left: 60%;
}
.content .ciel .star:nth-child(8) {
top: 7%;
left: 47%;
}
.content .ciel .star:nth-child(9) {
top: 28%;
left: 63%;
animation-duration: 7s;
}
.content .ciel .star:nth-child(10) {
top: 38%;
left: 83%;
animation-duration: 4s;
}
.content .mer {
position: absolute;
bottom: 0;
width: 100%;
height: 52%;
background: linear-gradient(to bottom, #323278, #252958, #080e2c);
background-image: linear-gradient(to bottom, #323278, #252964, #192151, #0f183e, #080e2c);
}
.content .mer .vague {
width: 110%;
position: absolute;
bottom: 0;
animation: vague 5s infinite;
transition-timing-function: ease;
}
.content .mer .vague1 {
background: #323278;
height: 100%;
animation: none;
}
.content .mer .vague2 {
background: #252964;
height: 95%;
animation-duration: 6s;
}
.content .mer .vague3 {
background: #192151;
height: 85%;
animation-duration: 5s;
}
.content .mer .vague4 {
background: #0f183e;
height: 70%;
animation-duration: 4s;
}
.content .mer .vague5 {
background: #080e2c;
height: 45%;
animation-duration: 6s;
}
.content .terre {
width: 100%;
height: 15%;
max-height: 30vw;
bottom: 51%;
position: absolute;
clip-path: polygon(38% 13%, 51% 42%, 68% 10%, 86% 43%, 100% 7%, 100% 100%, 0 100%, 0 0, 11% 18%, 20% 48%);
background: linear-gradient(to bottom, #643209, #080e2c);
}
@media not all and (min-resolution: 0.001dpcm) {
.hogwarts {
display: none;
}
.content .ciel {
background: linear-gradient(to bottom, #3a1479, #0e0f45);
}
.content .ciel::after {
transform: translateY(25%);
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 130%;
background-image: radial-gradient(circle, #f5c9e9ff, #f5c9e9ee 25%, #bd93bcaa 25%, #bd93bcaa 38%, #85629277 45%, #4d356a55, #0e0f4511);
}
.content .terre {
width: 70%;
height: 10vmw;
min-height: 200px;
bottom: 51.8%;
clip-path: unset;
background: transparent;
background: #00000000;
min-width: 500px;
}
.content .terre::after {
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
clip-path: polygon(82% 39%, 88% 57%, 85% 79%, 96% 89%, 100% 100%, 0 100%, 10% 75%, 23% 70%, 31% 57%, 43% 49%);
}
.content .terre .azcaban {
position: absolute;
content: "";
bottom: 0;
left: 45%;
width: 15%;
height: 160%;
background: black;
transform: skewY(-13deg) translateY(-20%);
max-width: 100px;
}
.content .terre .azcaban::after {
position: absolute;
content: "";
bottom: 0;
right: -45%;
width: 80%;
height: 100%;
background: black;
transform: skewY(23deg);
}
}
p {
color: #efefef;
bottom: 0;
left: 10px;
position: absolute;
z-index: 10;
font-family: sans-serif;
opacity: 0.5;
}
body,
html {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
min-height: 1000px;
overflow: auto;
}
* {
box-sizing: border-box;
}
</style>
</head>
<.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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