svg城墙分层立体视觉效果-html代码-BFW代码库

代码语言：html

代码描述：svg城墙分层立体视觉效果

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

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

<style>
body {
  display: grid;
  place-items: center;
  height: 100vh;
  width: 100vw;
  background: #63ffd9;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  --path:path("M 0 400 Q 110 400 110 330 L 110 130 Q 110 60 170 60 Q 230 60 230 130 L 230 590 Q 230 660 290 660 Q 350 660 350 590 L 350 290 Q 350 220 410 220 Q 470 220 470 290 L 470 500 Q 470 570 530 570 Q 590 570 590 500 L 590 160 Q 590 90 650 90 Q 710 90 710 160 L 710 320 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path1:path("M 0 400 Q 110 400 110 330 L 110 130 Q 110 60 170 60 Q 230 60 230 130 L 230 590 Q 230 660 290 660 Q 350 660 350 590 L 350 290 Q 350 220 410 220 Q 470 220 470 290 L 470 500 Q 470 570 530 570 Q 590 570 590 500 L 590 160 Q 590 90 650 90 Q 710 90 710 160 L 710 320 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path2: path("M 0 400 Q 110 400 110 330 L 110 260 Q 110 190 170 190 Q 230 190 230 260 L 230 360 Q 230 440 290 440 Q 350 440 350 360 L 350 290 Q 350 220 410 220 Q 470 220 470 290 L 470 560 Q 470 640 530 640 Q 590 640 590 560 L 590 140 Q 590 70 650 70 Q 710 70 710 140 L 710 320 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path3: path("M 0 400 Q 110 400 110 400 L 140 400 Q 170 400 170 400 Q 200 400 230 400 L 260 400 Q 280 400 300 400 Q 350 400 350 330 L 350 290 Q 350 220 410 220 Q 470 220 470 290 L 470 560 Q 470 640 530 640 Q 590 640 590 560 L 590 140 Q 590 70 650 70 Q 710 70 710 140 L 710 320 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path4: path("M 0 400 Q 80 400 80 470 L 80 620 Q 80 700 140 700 Q 200 700 200 620 L 200 480 Q 200 390 300 400 Q 350 400 350 330 L 350 290 Q 350 220 410 220 Q 470 220 450 220 L 490 220 Q 510 220 530 220 Q 590 220 590 160 L 590 140 Q 590 70 650 70 Q 710 70 710 140 L 710 320 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path5: path("M 0 400 Q 80 400 80 470 L 80 620 Q 80 700 170 700 Q 260 700 260 620 L 260 520 Q 260 470 260 290 Q 260 220 330 220 L 370 220 Q 390 220 410 220 Q 470 220 450 220 L 490 220 Q 510 220 530 220 Q 580 220 590 280 L 590 500 Q 590 580 650 580 Q 710 580 710 500 L 710 470 Q 710 400 800 400 L 800 800 L 0 800 L 0 40");
  --path6: path("M 0 400 Q 80 400 80 470 L 80 620 Q 80 700 170 700 Q 260 700 260 620 L 260 520 Q 260 470 260 290 Q 260 220 330 220 L 330 220 Q 390 220 390 110 Q 390 50 450 50 L 520 50 Q 580 50 580 110 Q 580 220 580 280 L 580 500 Q 580 580 650 580 Q 710 580 710 500 L 710 470 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path7:path("M 0 400 Q 80 400 80 400 L 120 400 Q 140 400 160 400 Q 190 400 210 400 L 240 400 Q 260 400 270 400 Q 290 400 310 400 L 340 400 Q 390 400 430 400 Q 450 400 470 400 L 520 400 Q 540 400 550 400 Q 570 400 580 400 L 610 400 Q 650 400 680 400 Q 700 400 710 400 L 730 400 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path8:path("M 0 400 Q 80 400 80 400 L 120 400 Q 140 400 160 400 Q 190 400 210 400 L 240 400 Q 260 400 270 400 Q 290 400 310 400 L 340 400 Q 390 400 430 400 Q 450 400 470 400 L 520 400 Q 540 400 550 400 Q 570 400 580 400 L 610 400 Q 650 400 680 400 Q 700 400 710 400 L 730 400 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path9:path("M 0 400 Q 80 400 80 400 L 120 400 Q 140 400 160 400 Q 190 400 210 400 L 240 400 Q 260 400 270 400 Q 290 400 310 400 L 340 400 Q 390 400 430 400 Q 450 400 470 400 L 520 400 Q 540 400 550 400 Q 570 400 580 400 L 610 400 Q 650 400 680 400 Q 700 400 710 400 L 730 400 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  -webkit-perspective: 800px;
          perspective: 800px;
  --color1: #422B38;
  --color2: #7F415C;
  --color3: #B83F6C;
  --color4: #EB2E5C;
  --color5: #FD6765;
  --color6: #F89275;
  --color7: #FDDA92;
}
body.dark {
  background: #00634b;
}
body.dark:before, body.dark:after {
  -webkit-filter: brightness(0.25) hue-rotate(15deg) saturate(5);
          filter: brightness(0.25) hue-rotate(15deg) saturate(5);
}
body.dark #wrap .row:before, body.dark #wrap:hover .row:before {
  background: #00634b;
  box-shadow: inset -50px -50px 0 0 rgba(245, 240, 192, 0.25);
  -webkit-transition: 0.3s ease-in-out, -webkit-transform 1s ease-in-out;
  transition: 0.3s ease-in-out, -webkit-transform 1s ease-in-out;
  transition: 0.3s ease-in-out, transform 1s ease-in-out;
  transition: 0.3s ease-in-out, transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
  -webkit-transform: scale(0.4) translateY(-250px) translateX(500px);
          transform: scale(0.4) translateY(-250px) translateX(500px);
}
body.dark .cell {
  -webkit-filter: brightness(0.5);
          filter: brightness(0.5);
}
body span {
  position: absolute;
  bottom: 50px;
  width: 100%;
  text-align: center;
  left: 0;
  z-index: 10;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}
body:before, body:after {
  pointer-events: none;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}
body:after {
  content: '';
  position: absolute;
  width: 440px;
  height: 440px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 0 0 40px #fcfffe;
  z-index: 9;
  border-radius: 10px;
}
body:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 8;
  background: radial-gradient(circle at center, #fcfffe 300px, #c9fff2);
  -webkit-mask: linear-gradient(to bottom, #000 calc(50% - 225px), transparent calc(50% - 225px), transparent calc(50% + 225px), #000 calc(50% + 225px)), linear-gradient(to right, #000 calc(50% - 225px), transparent calc(50% - 225px), transparent calc(50% + 225px), #000 calc(50% + 225px));
          mask: linear-gradient(to bottom, #000 calc(50% - 225px), transparent calc(50% - 225px), transparent calc(50% + 225px), #000 calc(50% + 225px)), linear-gradient(to right, #000 calc(50% - 225px), transparent calc(50% - 225px), transparent calc(50% + 225px), #000 calc(50% + 225px));
}
body #wrap:hover {
  -webkit-transform: scale(0.5) scaleX(1.25) rotateX(50deg);
          transform: scale(0.5) scaleX(1.25) rotateX(50deg);
}
body #wrap:hover .row:nth-of-type(1) {
  -webkit-transform: translateY(0px) rotateX(-50deg) skewY(-2.5deg);
          transform: translateY(0px) rotateX(-50deg) skewY(-2.5deg);
}
body #wrap:hover .row:nth-of-type(1):nth-of-type(odd) {
  -webkit-transform: translateY(0px) rotateX(-50deg) skewY(2.5deg);
          transform: translateY(0px) rotateX(-50deg) skewY(2.5deg);
}
body #wrap:hover .row:nth-of-type(2) {
  -webkit-transform: translateY(5px) rotateX(-50d.........完整代码请登录后点击上方下载按钮下载查看