div+css绘制一个三维云端阁楼房屋效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：div+css绘制一个三维云端阁楼房屋效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  --mouseX: 0;
  --mouseY: 0;
  display: grid;
  height: 100vh;
  overflow: hidden;
  place-items: center;
  background: linear-gradient(to top, #f3ebde 25%, rgba(255, 255, 255, 0.001) 50%), radial-gradient(circle at center, #f3ebde 7.5vmin, #6d9fbd 50vmin);
  perspective: 300vmin;
}
body:active:hover #wrap {
  transform: translateZ(calc((var(--mouseX) * -7.5vmin) + 55vmin)) translateY(7.5vmin) scale(0.5) rotateY(calc(25deg + (var(--mouseX) * 65deg))) rotateX(0);
  transition: 2s ease-in-out;
}
body:active:hover #wrap * {
  transition: 2s ease-in-out;
}
body:active:hover #wrap *:before, body:active:hover #wrap *:after {
  transition: 2s ease-in-out;
}
body:hover #wrap {
  transition: 0s ease-in-out;
}
body:hover #wrap * {
  transition: 0s ease-in-out;
}
body:hover #wrap *:before, body:hover #wrap *:after {
  transition: 0s ease-in-out;
}
body .panel {
  position: fixed;
  z-index: 999;
  width: 5vw;
  height: 100vh;
  top: 0;
}
body .panel:nth-of-type(1) {
  left: 0vw;
}
body .panel:nth-of-type(1):hover ~ #wrap {
  --mouseX: -0.3166666667;
}
body .panel:nth-of-type(2) {
  left: 5vw;
}
body .panel:nth-of-type(2):hover ~ #wrap {
  --mouseX: -0.2833333333;
}
body .panel:nth-of-type(3) {
  left: 10vw;
}
body .panel:nth-of-type(3):hover ~ #wrap {
  --mouseX: -0.25;
}
body .panel:nth-of-type(4) {
  left: 15vw;
}
body .panel:nth-of-type(4):hover ~ #wrap {
  --mouseX: -0.2166666667;
}
body .panel:nth-of-type(5) {
  left: 20vw;
}
body .panel:nth-of-type(5):hover ~ #wrap {
  --mouseX: -0.1833333333;
}
body .panel:nth-of-type(6) {
  left: 25vw;
}
body .panel:nth-of-type(6):hover ~ #wrap {
  --mouseX: -0.15;
}
body .panel:nth-of-type(7) {
  left: 30vw;
}
body .panel:nth-of-type(7):hover ~ #wrap {
  --mouseX: -0.1166666667;
}
body .panel:nth-of-type(8) {
  left: 35vw;
}
body .panel:nth-of-type(8):hover ~ #wrap {
  --mouseX: -0.0833333333;
}
body .panel:nth-of-type(9) {
  left: 40vw;
}
body .panel:nth-of-type(9):hover ~ #wrap {
  --mouseX: -0.05;
}
body .panel:nth-of-type(10) {
  left: 45vw;
}
body .panel:nth-of-type(10):hover ~ #wrap {
  --mouseX: -0.0166666667;
}
body .panel:nth-of-type(11) {
  left: 50vw;
}
body .panel:nth-of-type(11):hover ~ #wrap {
  --mouseX: 0.0166666667;
}
body .panel:nth-of-type(12) {
  left: 55vw;
}
body .panel:nth-of-type(12):hover ~ #wrap {
  --mouseX: 0.05;
}
body .panel:nth-of-type(13) {
  left: 60vw;
}
body .panel:nth-of-type(13):hover ~ #wrap {
  --mouseX: 0.0833333333;
}
body .panel:nth-of-type(14) {
  left: 65vw;
}
body .panel:nth-of-type(14):hover ~ #wrap {
  --mouseX: 0.1166666667;
}
body .panel:nth-of-type(15) {
  left: 70vw;
}
body .panel:nth-of-type(15):hover ~ #wrap {
  --mouseX: 0.15;
}
body .panel:nth-of-type(16) {
  left: 75vw;
}
body .panel:nth-of-type(16):hover ~ #wrap {
  --mouseX: 0.1833333333;
}
body .panel:nth-of-type(17) {
  left: 80vw;
}
body .panel:nth-of-type(17):hover ~ #wrap {
  --mouseX: 0.2166666667;
}
body .panel:nth-of-type(18) {
  left: 85vw;
}
body .panel:nth-of-type(18):hover ~ #wrap {
  --mouseX: 0.25;
}
body .panel:nth-of-type(19) {
  left: 90vw;
}
body .panel:nth-of-type(19):hover ~ #wrap {
  --mouseX: 0.2833333333;
}
body .panel:nth-of-type(20) {
  left: 95vw;
}
body .panel:nth-of-type(20):hover ~ #wrap {
  --mouseX: 0.3166666667;
}
body:before {
  content: "";
  position: absolute;
  width: 65vmin;
  height: 70vmin;
  box-shadow: 0 0 0 5vmin #fff, 0 5vmin 10vmin -2.5vmin rgba(0, 0, 0, 0.5), 0 0 0 200vw #f3ebde;
  z-index: 998;
}
body .upperblock {
  position: absolute;
  width: 50vmin;
  height: 100vmin;
  left: 15.5vmin;
  top: -2.5vmin;
  transform: translateZ(-25vmin);
}
body .upperblock .roofblock {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  top: -9.5vmin;
  height: 7.5vmin;
  width: 20vmin;
  left: calc(50% - 10vmin);
  transform: scaleY(1.25) scaleX(1.25) translateZ(25vmin);
}
body .upperblock .roofblock .tower {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  width: 3vmin;
  height: 5.5vmin;
  left: calc(50% - 3vmin);
  top: auto;
  bottom: 100%;
  transform: translateZ(-62.5vmin);
}
body .upperblock .roofblock .tower .towerside {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform-origin: 50% 50% 3vmin;
  transform-origin: 50% 50% 3vmin;
  transform-origin: 50% 50% 3vmin;
  transform-origin: 50% 50% 3vmin;
  transform-origin: 50% 50% 3vmin;
  transform-origin: 50% 50% 3vmin;
  transform-origin: 50% 50% 3vmin;
  transform-origin: 50% 50% 3vmin;
}
body .upperblock .roofblock .tower .towerside:before, body .upperblock .roofblock .tower .towerside:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  left: -1.5vmin;
  top: auto;
  bottom: calc(100% - 1.25vmin);
  transform: rotateX(-30deg);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 3vmin 11vmin 3vmin;
}
body .upperblock .roofblock .tower .towerside:after {
  left: calc(50% - 0.375vmin);
  bottom: calc(100% + 4.5vmin);
  border-width: 0 0.75vmin 11vmin 0.75vmin;
  transform: translateZ(4.85vmin) rotateX(-8.5deg);
  transform-origin: 50% -11vmin;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(1) {
  background: linear-gradient(to top, #e5c782 0.5vmin, #e2c175 0.5vmin, #e2c175 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #e3c379 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #e3c379 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #e3c379 calc(100% - 0.5vmin));
  transform: rotateY(45deg);
}
body .upperblock .roofblock .tower .towerside:nth-of-type(1):before {
  border-color: transparent transparent #5d8061 transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(1):after {
  border-color: transparent transparent #e0bc68 transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(2) {
  background: linear-gradient(to top, #e9cf93 0.5vmin, #e6c986 0.5vmin, #e6c986 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #e7cb8a 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #e7cb8a 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #e7cb8a calc(100% - 0.5vmin));
  transform: rotateY(90deg);
}
body .upperblock .roofblock .tower .towerside:nth-of-type(2):before {
  border-color: transparent transparent #557458 transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(2):after {
  border-color: transparent transparent #e2c071 transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(3) {
  background: linear-gradient(to top, #ecd6a4 0.5vmin, #e9d197 0.5vmin, #e9d197 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #ead29b 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #ead29b 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #ead29b calc(100% - 0.5vmin));
  transform: rotateY(135deg);
}
body .upperblock .roofblock .tower .towerside:nth-of-type(3):before {
  border-color: transparent transparent #4c694f transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(3):after {
  border-color: transparent transparent #e3c379 transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(4) {
  background: linear-gradient(to top, #f0deb4 0.5vmin, #edd8a8 0.5vmin, #edd8a8 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #eedaac 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #eedaac 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #eedaac calc(100% - 0.5vmin));
  transform: rotateY(180deg);
}
body .upperblock .roofblock .tower .towerside:nth-of-type(4):before {
  border-color: transparent transparent #445d46 transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(4):after {
  border-color: transparent transparent #e5c782 transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(5) {
  background: linear-gradient(to top, #f3e5c5 0.5vmin, #f0e0b9 0.5vmin, #f0e0b9 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #f1e1bd 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #f1e1bd 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #f1e1bd calc(100% - 0.5vmin));
  transform: rotateY(225deg);
}
body .upperblock .roofblock .tower .towerside:nth-of-type(5):before {
  border-color: transparent transparent #3b513d transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(5):after {
  border-color: transparent transparent #e7cb8a transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(6) {
  background: linear-gradient(to top, #f7edd6 0.5vmin, #f4e7ca 0.5vmin, #f4e7ca 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #f5e9ce 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #f5e9ce 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #f5e9ce calc(100% - 0.5vmin));
  transform: rotateY(270deg);
}
body .upperblock .roofblock .tower .towerside:nth-of-type(6):before {
  border-color: transparent transparent #324534 transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(6):after {
  border-color: transparent transparent #e9cf93 transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(7) {
  background: linear-gradient(to top, #faf4e7 0.5vmin, #f7efda 0.5vmin, #f7efda 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #f8f1df 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #f8f1df 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #f8f1df calc(100% - 0.5vmin));
  transform: rotateY(315deg);
}
body .upperblock .roofblock .tower .towerside:nth-of-type(7):before {
  border-color: transparent transparent #2a392b transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(7):after {
  border-color: transparent transparent #ead29b transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(8) {
  background: linear-gradient(to top, #fefcf8 0.5vmin, #fbf6eb 0.5vmin, #fbf6eb 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #fcf8f0 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #fcf8f0 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #fcf8f0 calc(100% - 0.5vmin));
  transform: rotateY(360deg);
}
body .upperblock .roofblock .tower .towerside:nth-of-type(8):before {
  border-color: transparent transparent #212e23 transparent;
}
body .upperblock .roofblock .tower .towerside:nth-of-type(8):after {
  border-color: transparent transparent #ecd6a4 transparent;
}
body .upperblock .roofblock .roofside {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: repeating-linear-gradient(to right, #deb860 0.25vmin, #8b7334 0.25vmin, #8b7334 1vmin, #deb860 1vmin, #deb860 1.25vmin);
  border-radius: 95vmin 95vmin 0 0/70vmin 70vmin 0 0;
  box-shadow: inset 0 0 0 1.5vmin #deb860;
  transform: translateZ(-5vmin);
}
body .upperblock .roofblock .roofside:before, body .upperblock .roofblock .roofside:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: radial-gradient(circle at bottom, #d5a536 50%, #deb860);
  border-radius: 5vmin 5vmin 0.5vmin 0.5vmin;
  top: -72.5%;
  width: 50%;
  left: 25%;
  height: 75%;
  transform-origin: bottom;
  transform: scale(0.75) translateZ(-4vmin) rotateY(calc(-25deg - (var(--mouseX) * 65deg))) rotateX(calc(var(--mouseX) * -2.5deg));
  box-shadow: inset calc(var(--mouseX) * 5vmin) 0 2vmin #b38825;
}
body .upperblock .roofblock .roofside:after {
  top: -82.5%;
  width: 35%;
  left: 32.5%;
  height: 50%;
  background: radial-gradient(circle at bottom, #deb860 50%, #e7cb8a);
  -webkit-mask: linear-gradient(to top, rgba(255, 255, 255, 0.001) 1vmin, #000 1.5vmin);
          mask: linear-gradient(to top, rgba(255, 255, 255, 0.001) 1vmin, #000 1.5vmin);
}
body .upperblock .roofblock .roofside .roofplank {
  top: 17.5vmin;
  height: 4.5vmin;
  width: 1vmin;
  position: absolute;
  left: calc(50% - 0.5vmin);
  transform-origin: 50% -150%;
}
body .upperblock .roofblock .roofside .roofplank:before {
  content: "";
  position: absolute;
  width: 175%;
  height: 40vmin;
  top: 100%;
  left: -37.5%;
  background: radial-gradient(circle at left, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% + 1vmin) calc(50% + 1vmin)/6vmin 6vmin, radial-gradient(circle at left, #5b7d5f 2vmin, #466048 2vmin) calc(50% + 1vmin) calc(50% - 1vmin)/6vmin 6vmin;
  transform-origin: top;
  transform: translateZ(5vmin) rotateX(-90deg);
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(1) {
  transform: rotate(110deg);
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(2) {
  transform: rotate(117.5deg);
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(3) {
  transform: rotate(125deg);
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(4) {
  transform: rotate(132.5deg);
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(5) {
  transform: rotate(140deg);
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
  background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
}
body .upperblock .roofblock .roofside .........完整代码请登录后点击上方下载按钮下载查看