纯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 {
  co.........完整代码请登录后点击上方下载按钮下载查看