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

纯css布局实现城堡效果

代码语言：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% 10.........完整代码请登录后点击上方下载按钮下载查看