纯css布局实现城堡效果-html代码-BFW代码库

代码语言：html

代码描述：纯css布局实现城堡效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.cartoon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vmin;
  height: 90vmin;
}

.cartoon div {
  position: absolute;
  box-sizing: border-box;
}

.b {
  border: 1vmin solid black;
}

.r {
  border-radius: 100%;
}

.hb::before,
.ha::after {
  content: "";
  display: block;
  position: absolute;
}


html, body {
  --background: #afe0f0;
  background: var(--background);
}

.cartoon {
  --white: #fff;
  --light: #dcf0f7;
  --blue: #7497de;
  --bluedark: #4d73be;
  width: 90vmin;
  height: 90vmin;
}

.sky {
  color: var(--background);
  width: 9.5%;
  height: 9.5%;
  background: #fff;
  top: 37.25%;
  left: 17%;
  box-shadow: 0 0 0 2vmin #dcf0f7, 10.75vmin -17.5vmin 0 -3.5vmin #fff, 48.75vmin -7vmin 0 -3.5vmin #fff, -7.75vmin 26.125vmin 0 -3.5vmin #fff,
    -8vmin 15vmin, -8vmin 22vmin, -16vmin 15vmin, -16vmin 22vmin, -12vmin 18.5vmin #fff,
    59vmin 19vmin, 59vmin 26vmin, 51vmin 19vmin, 51vmin 26vmin, 55vmin 22.5vmin #fff,
    62vmin -17vmin, 62vmin -10vmin, 54vmin -17vmin, 54vmin -10vmin, 58vmin -13.5vmin #fff;
}

.shadow {
  width: 53.75%;
  height: 3%;
  background: #85b3c7;
  border-radius: 10vmin;
  top: 84.5%;
  left: 22.75%;
}

.cloud {
  width: 80%;
  height: 20%;
  overflow: hidden;
}

.cloud-1 {
  top: 64.5%;
  left: 10%;
}

.cloud-1::after {
  color: #94c6dd;
  border-radius: 50%;
  width: 11%;
  height: 44%;
  background: #94c6dd;
  bottom: -20%;
  left: 5%;
  box-shadow: 5.5vmin -3.5vmin, 5.5vmin 0, 59vmin 0, 50vmin -4vmin 0 3.75vmin;
}

.cloud-2 {
  top:37.33%;
  left: 50%;
}

.cloud-2::after {
  color: #dcf0f7;
  border-radius: 50%;
  width: 12%;
  height: 48%;
  background: #dcf0f7;
  bottom: -20%;
  left: 2%;
  box-shadow: 9vmin -4.25vmin 0 3.75vmin, 18.5vmin -1.5vmin, 23.5vmin 0.25vmin 0 -2.5vmin;
}

.wall {
  background: #f008;
  height: 12.25%;
  width: 44%;
  top: 73.75%;
  left: 28.125%;
  background: linear-gradient(to bottom, transparent 12.5%, #bab2aa 0), linear-gradient(to right, transparent 50%, #bab2aa 0), linear-gradient(to right, #7a7d7f 50%, transparent 0);
  background-size: 6% 100%, 6% 100%, 100% 100%;
  background-position: -3.75vmin 0;
}

.wall::after {
  height: 14%;
  width: 40%;
  background: var(--bluedark);
  top: -13%;
  left: 0;
  clip-path: polygon(0% 100%, 8% 0%, 100% 0%, 100% 100%);
}

.tower {
  height: 19.75%;
  width: 6.25%;
  top: 66.25%;
  clip-path: polygon(12% 0%, 88% 0%, 88% 9%, 84% 9%, 84% 15%, 100% 20%, 100% 32%, 87% 39%, 87% 100%, 12% 100%, 12% 39%, 0% 32%, 0% 20%, 16% 15%, 16% 9%, 12% 9%, 12% 0);
  background: linear-gradient(to bottom, #ffffff 9%, #d7d1cb 0 15%, #f7f4f0 0 20%, #ffffff 0 32%, #ebe7e1 0 39%, #ffffff 0 45.75%, transparent 0), linear-gradient(to right, #f7f4f0 27%, #ebe7e1 0 65%, #d7d1cb 0);
}

.tower-1 {
  left: 33.75%;
}

.tower-2 {
  left: 51.5%;
}

.tower-3 {
  width: 7.25%;
  left: 24.5%;
}

.tower-3a {
  clip-path: polygon(16% 0%, 84% 0%, 84% 9%, 84% 15%, 100% 20%, 100% 32%, 87% 39%, 87% 100%, 12% 100%, 12% 39%, 0% 32%, 0% 20%, 16% 15%, 16% 9%, 16% 0);
}

.tower-3b {
  clip-path: polygon(16% 45.75%, 84% 45.75%, 84% 100%, 16% 100%);
}

.tower-4 {
  opacity:10.5;
  width: 6.66%;
  left: 60.125%;
  clip-path: polygon(16% 29.5%, 84% 30.5%, 84% 100%, 16% 100%);
  background: linear-gradient(to bottom, #ebe7e1 0 45.75%, transparent 0), linear-gradient(to right, #f7f4f0 27%, #ebe7e1 0 65%, #d7d1cb 0);
}

.tower-5 {
  left: 67%;
  width: 8.66%;
  clip-path: polygon(0% 20.5%, 100% 20.5%, 100% 39%, 85% 45%, 85% 100%, 15% 100%, 15% 45%, 0% 39%);
  background: linear-gradient(transparent 30%, #ffffff 0 39%, #bab2aa 0 45%, #ebe7e1 0), linear-gradient(to right, white 50%, #bab2aa 0);
  background-size: 100% 100%, 40% 100%;
}

.tower-6 {
  clip-path: polygon(0% 3%, 100% 3%, 100% 40%, 0% 40%);
  background-image: linear-gradient(transparent 13%, #ffffff 0 21%, #bab2aa 0), linear-gradient(to right, white 50%, #bab2aa 0);
  transform: scale(0.85);
  left: 66.4%;
  top: 64.8%;
}

.tower-7 {
  top: 62.66%;
  left: 58.5%
}

.brick {
  color: #c1b9af;
  background: #c1b9af;
  top: 78%;
  left: 27.25%;
  width: 1.35%;
  height: 0.9%;
  box-shadow: -0.8vmin -0.85vmin, -0.8vmin 5.25vmin, 0.6vmin 3.5vmin, 1.75vmin 2.6vmin, 7.5vmin -1.8vmin, 7.5vmin 4vmin, 8vmin 4.8vmin, 9.5vmin 0.7vmin, 23.4vmin 1.9vmin, 24.33vmin -0.5vmin, 25.6vmin -1.3vmin, 24.33vmin 4.75vmin, 25.6vmin 5.5vmin, 31.25vmin -1.75vmin, 31.25vmin 5vmin, 32.25vmin 2vmin, 33.5vmin 1.2vmin, 36.75vmin 1vmin, 37.66vmin 1.8vmin, 40vmin -1.5vmin, 40.125vmin 4.25vmin, 41.25vmin 3.4vmin, 36.75vmin 5.25vmin;
}

.window {
  color: #7a7d7f;
  background: #7a7d7f;
  width: 1.25%;
  height: 1.25%;
  top: 70.25%;
  left: 26.2%;
  box-shadow: 2.25vmin 0, 8vmin 0, 10.25vmin 0, 24vmin 0, 26.125vmin 0, 4.6vmin -4vmin 0 -0.125vmin, 4.6vmin -4.5vmin 0 -0.125vmin, 12.75vmin .........完整代码请登录后点击上方下载按钮下载查看