CSS3雄伟的寺庙 | 庙宇

Isometric Castle

css3, temple

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2332
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

$c1: #aaa;
$c2: #fff;
$c3: #476;
$bg: #fcc;
$size: 0.8vh;

$blocks:
(26 29 5 1 1 $c1)
(30 12 1 17 1 $c1)
(27 31 5 1 3 $c1)
(30 34 5 1 4 $c2)
(0 0 39 11 1 $c1)
(32 13 1 18 3 $c1)
(35 17 1 17 4 $c2)
(43 12 38 2 3 $c1)
(34 37 5 1 1 $c3)
(45 16 38 2 3 $c1)
(38 19 1 18 1 $c3)
(43 20 42 2 3 $c1)
(35 39 11 1 1 $c3)
(40 19 5 20 1 $c3)
(2 2 37 9 3 $c1)
(5 5 37 9 4 $c2)
(8 8 39 11 1 $c3)
(10 10 37 9 1 $c3)
(36 41 12 1 4 $c2)
(47 40 1 1 2 $c1)
(47 54 1 1 2 $c1)
(46 24 41 15 3 $c1)
(50 28 39 15 3 $c1)
(50 46 39 15 3 $c1)
(53 31 39 39 4 $c2)
(40 44 12 3 1 $c3)
(41 48 12 2 1 $c3)
(40 52 12 3 1 $c3)
(41 51 12 2 1 $c3)
(42 51 12 1 1 $c3)
(56 75 41 1 1 $c3)
(97 34 1 41 1 $c3)
(56 34 41 41 1 $c3)
(56 33 41 1 1 $c3)
(55 34 1 41 1 $c3)
(56 34 1 1 1 $c3)
(56 76 1 1 1 $c3)
(98 34 1 1 1 $c3)
(84 36 13 39 1 $c3)
(85 38 12 37 4 $c2)
(63 80 39 1 1 $c3)
(102 41 1 39 1 $c3)
(89 41 13 39 1 $c3)
(90 40 12 1 1 $c3)
(71 36 13 1 7 $c2)
(58 36 13 39 1 $c3)
(60 38 12 37 4 $c2)
(63 41 12 39 1 $c3)
(62 41 1 39 1 $c3)
(63 40 12 1 1 $c3)
(102 45 2 1 1 $c3)
(102 47 3 1 1 $c3)
(102 49 4 1 1 $c3)
(103 51 4 1 1 $c3)
(104 53 4 1 1 $c3)
(109 54 1 1 1 $c3)
(65 43 37 37 1 $c3)
(67 45 35 35 1 $c3)
(69 47 33 33 4 $c2)
(89 41 2 2 1 $c3)
(90 44 2 1 1 $c3)
(88 42 2 2 1 $c3)
(89 45 2 2 1 $c3)
(82 43 7 2 1 $c3)
(83 46 7 2 1 $c3)
(79 42 2 2 1 $c3)
(80 45 2 2 1 $c3)
(76 41 2 2 1 $c3)
(77 44 2 1 1 $c3)
(63 53 2 1 1 $c3)
(64 46 1 7 1 $c2)
(64 53 3 1 1 $c3)
(65 48 1 5 1 $c2)
(65 53 4 1 1 $c3)
(66 50 1 3 1 $c2)
(66 53 4 1 1 $c3)
(67 52 1 1 1 $c2)
(67 53 4 1 1 $c3)
(66 51 4 1 1 $c3)
(65 49 4 1 1 $c3)
(64 47 3 1 1 $c3)
(63 45 2 1 1 $c3)
(67 54 1 1 1 $c3)
(63 77 2 1 1 $c3)
(64 70 1 7 1 $c2)
(64 77 3 1 1 $c3)
(65 72 1 5 1 $c2)
(65 77 4 1 1 $c3)
(66 74 1 3 1 $c2)
(66 77 4 1 1 $c3)
(67 76 1 1 1 $c2)
(67 77 4 1 1 $c3)
(66 75 4 1 1 $c3)
(65 73 4 1 1 $c3)
(64 71 3 1 1 $c3)
(63 69 2 1 1 $c3)
(67 78 1 1 1 $c3)
(63 41 1 1 1 $c3)
(63 81 1 1 1 $c3)
(103 41 1 1 1 $c3)
(72 85 35 1 1 $c3)
(107 50 1 35 1 $c3)
(72 50 35 35 1 $c3)
(71 50 1 35 1 $c3)
(72 49 35 1 1 $c3)
(77 85 1 2 1 $c3)
(74 52 33 33 1 $c3)
(79 85 1 3 1 $c3)
(76 54 31 31 1 $c3)
(81 85 1 4 1 $c3)
(83 86 1 4 1 $c3)
(85 87 1 4 1 $c3)
(86 92 1 1 1 $c3)
(78 56 29 29 4 $c2)
(103 50 1 2 1 $c3)
(96 51 7 1 1 $c2)
(103 51 1 3 1 $c3)
(98 52 5 1 1 $c2)
(103 52 1 4 1 $c3)
(100 53 3 1 1 $c2)
(103 53 1 4 1 $c3)
(102 54 1 1 1 $c2)
(103 54 1 4 1 $c3)
(101 53 1 4 1 $c3)
(99 52 1 4 1 $c3)
(97 51 1 3 1 $c3)
(95 50 1 2 1 $c3)
(104 54 1 1 1 $c3)
(85 50 1 2 1 $c3)
(78 51 7 1 1 $c2)
(85 51 1 3 1 $c3)
(80 52 5 1 1 $c2)
(85 52 1 4 1 $c3)
(82 53 3 1 1 $c2)
(85 53 1 4 1 $c3)
(84 54 1 1 1 $c2)
(85 54 1 4 1 $c3)
(83 53 1 4 1 $c3)
(81 52 1 4 1 $c3)
(79 51 1 3 1 $c3)
(77 50 1 2 1 $c3)
(86 54 1 1 1 $c3)
(72 50 1 1 1 $c3)
(72 86 1 1 1 $c3)
(108 50 1 1 1 $c3)
(81 90 31 1 1 $c3)
(112 59 1 31 1 $c3)
(81 59 31 31 1 $c3)
(80 59 1 31 1 $c3)
(81 58 31 1 1 $c3)
(83 61 29 29 1 $c3)
(85 63 27 27 1 $c3)
(87 65 25 25 1 $c3)
(89 67 23 23 7 $c2)
(102 59 1 2 1 $c3)
(93 60 9 1 1 $c2)
(102 60 1 3 1 $c3)
(95 61 7 1 1 $c2)
(102 61 1 4 1 $c3)
(97 62 5 1 1 $c2)
(102 62 1 5 1 $c3)
(99 63 3 1 1 $c2)
(102 63 1 5 1 $c3)
(101 64 1 1 1 $c2)
(102 64 1 5 1 $c3)
(100 63 1 5 1 $c3)
(98 62 1 5 1 $c3)
(96 61 1 4 1 $c3)
(94 60 1 3 1 $c3)
(92 59 1 2 1 $c3)
(103 64 1 1 1 $c3)
(81 59 1 1 1 $c3)
(81 91 1 1 1 $c3)
(113 59 1 1 1 $c3)
(95 98 9 1 1 $c3)
(111 98 9 1 1 $c3)
(120 73 1 25 1 $c3)
(111 73 9 25 1 $c3)
(95 73 9 25 1 $c3)
(94 73 1 25 1 $c3)
(95 72 9 1 1 $c3)
(111 72 9 1 1 $c3)
(105 98 7 2 1 $c3)
(97 75 23 23 1 $c3)
(105 73 7 2 1 $c3)
(99 77 21 21 1 $c3)
(101 79 19 19 1 $c3)
(102 82 19 15 1 $c3)
(103 85 19 11 1 $c3)
(104 88 19 7 1 $c3)
(105 91 19 3 1 $c3)
(106 93 19 1 1 $c3)
(106 94 1 1 1 $c3)
(108 95 1 1 1 $c3)
(126 94 1 1 1 $c3)
(126 95 1 1 1 $c3)
(95 73 1 1 1 $c3)
(95 99 1 1 1 $c3)
(121 99 1 1 1 $c3)
(121 73 1 1 1 $c3)
(11 27 17 17 3 $c1)
(15 31 15 15 3 $c1)
(19 35 13 13 3 $c1)
(22 38 13 13 6 $c2)
(27 58 15 1 1 $c3)
(42 43 1 15 1 $c3)
(27 43 15 15 1 $c3)
(26 43 1 15 1 $c3)
(27 42 15 1 1 $c3)
(29 45 13 13 1 $c3)
(27 43 1 1 1 $c3)
(27 59 1 1 1 $c3)
(43 43 1 1 1 $c3)
(31 47 11 11 4 $c2)
(34 63 4 1 1 $c3)
(43 63 4 1 1 $c3)
(47 59 1 4 1 $c3)
(47 50 1 4 1 $c3)
(43 59 4 4 1 $c3)
(34 59 4 4 1 $c3)
(35 54 1 5 1 $c2)
(43 50 4 4 1 $c3)
(34 50 4 4 1 $c3)
(33 59 1 4 1 $c3)
(33 50 1 4 1 $c3)
(34 49 4 1 1 $c3)
(43 49 4 1 1 $c3)
(39 63 5 2 1 $c3)
(36 52 11 11 1 $c3)
(38 54 9 9 5 $c2)
(34 59 3 1 1 $c3)
(36 59 3 1 1 $c3)
(36 60 1 1 1 $c3)
(35 57 3 1 1 $c3)
(34 55 2 1 1 $c3)
(39 50 5 2 1 $c3)
(34 50 1 1 1 $c3)
(34 64 1 1 1 $c3)
(48 50 1 1 1 $c3)
(42 50 1 1 1 $c3)
(42 69 11 1 1 $c3)
(53 58 1 11 1 $c3)
(42 58 11 11 1 $c3)
(42 57 11 1 1 $c3)
(41 58 1 11 1 $c3)
(44 61 9 7 1 $c3)
(45 63 9 5 1 $c3)
(46 65 9 3 1 $c3)
(47 67 9 1 1 $c3)
(47 68 1 1 1 $c3)
(49 69 1 1 1 $c3)
(57 68 1 1 1 $c3)
(57 69 1 1 1 $c3)
(42 58 1 1 1 $c3)
(42 70 1 1 1 $c3)
(54 70 1 1 1 $c3)
(54 58 1 1 1 $c3);

$windows:
(8 6 1 2 false)
(12 6 1 2 false)
(16 6 1 2 false)
(20 6 1 2 false)
(24 6 1 2 false)
(28 6 1 2 false)
(32 6 1 2 false)
(36 6 1 2 false)
(40 6 1 2 false)
(36 32 1 2 true)
(36 28 1 2 true)
(36 24 1 2 true)
(36 20 1 2 true)
(33 35 1 2 false)
(42 42 1 1 false)
(44 42 1 2 false)
(33 41 2 1 false)
(28 41 2 1 false)
(40 48 1 2 false)
(37 48 1 2 false)
(34 48 1 1 false)
(41 55 2 2 false)
(44 55 2 2 false)
(25 44 2 1 true)
(25 49 2 1 true)
(32 50 1 1 true)
(32 53 1 2 true)
(32 56 1 2 true)
(57 32 1 1 false)
(59 32 1 1 false)
(63 32 1 1 false)
(65 32 1 1 false)
(69 32 1 1 false)
(71 32 1 1 false)
(75 32 1 1 false)
(77 32 1 1 false)
(81 32 1 1 false)
(83 32 1 1 false)
(87 32 1 1 false)
(89 32 1 1 false)
(63 39 1 1 false)
(65 39 1 1 false)
(69 39 1 1 false)
(71 39 1 1 false)
(73 37 11 2 false)
(76 40 11 2 false)
(87 39 1 2 false)
(89 39 1 1 false)
(93 39 1 1 false)
(95 39 1 1 false)
(73 48 1 1 false)
(75 48 1 1 false)
(79 48 1 1 false)
(81 48 1 1 false)
(91 48 1 1 false)
(93 48 1 1 false)
(97 48 1 1 false)
(99 48 1 1 false)
(83 52 1 2 false)
(101 52 1 2 false)
(89 57 1 1 false)
(91 57 1 1 false)
(95 57 1 1 false)
(97 57 1 1 false)
(97 61 1 1 false)
(99 61 1 2 false)
(95 69 3 3 false)
(99 69 3 3 false)
(103 69 3 3 false)
(107 69 3 3 false)
(54 35 1 1 true)
(54 37 1 1 true)
(54 41 1 1 true)
(54 43 1 1 true)
(54 47 1 1 true)
(54 49 1 1 true)
(54 53 1 1 true)
(54 55 1 1 true)
(61 41 1 1 true)
(61 43 1 1 true)
(61 47 1 1 true)
(61 49 1 1 true)
(61 53 1 1 true)
(61 55 1 1 true)
(61 59 1 1 true)
(61 61 1 1 true)
(61 65 1 1 true)
(61 67 1 1 true)
(61 71 1 1 true)
(61 73 1 1 true)
(65 51 1 2 true)
(65 75 1 2 true)
(70 57 1 1 true)
(70 59 1 1 true)
(70 63 1 1 true)
(70 65 1 1 true)
(70 69 1 1 true)
(70 71 1 1 true)
(79 61 1 1 true)
(79 63 1 1 true)
(79 67 1 1 true)
(79 69 1 1 true)
(79 73 1 1 true)
(79 75 1 1 true)
(79 79 1 1 true)
(79 81 1 1 true)
(91 73 3 3 true)
(91 77 3 3 true)
(91 81 3 3 true)
(91 85 3 3 true);

$pieces: length($blocks) + length($windows);
// (<piece> <z-index to move to>)
$windows2correct: (303 45) (316 134) (317 120) (326 154) (348 75) (349 89);
/*
// For working with grid.
$size: 10px;
$gridColor: rgba(0,0,0,0.3);
$grid: repeating-linear-gradient(transparent, transparent $size - 1, $gridColor $size - 1, $gridColor $size),
    repeating-linear-gradient(90deg, transparent, transparent $size - 1, $gridColor $size - 1, $gridColor $size), repeating-linear-gradient(-45deg, transparent, transparent (($size*(sqrt(2)/2)) - 1), $gridColor (($size*(sqrt(2)/2)) - 1), $gridColor ($size*(sqrt(2)/2)));

.ground, .ground > div {
	background-image: $grid;
}
*/
body, main {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  align-items: center;
  justify-content: center;
}
body {
  background: $bg;
  font: $size sans-serif;
  height: 100vh;
  overflow-x: hidden;
  margin: 0;
}
main {
  flex-direction: column;
  justify-content: flex-end;
  width: 58vh;
  height: 90vh;
}
.ground {
  width: $size * 70;
  height: $size * 34;
  position: relative;
  transform: translateY(-$size*9) rotateX(45deg) rotateZ(-45deg);
  > div {
    position: absolute;
    bottom: 0;
    left: 0;
    @for $i from 1 through $pieces {
        $isBadWindow: false;
      &:nth-of-type(#{$i}) {
        @if $i > length($blocks) {
              // z-index corrections for windows with minor portion not covered by roof
              @for $j from 1 through length($windows2correct) {
                  @if $i == nth(nth($windows2correct, $j), 1) {
                  $isBadWindow: true;
                      z-index: nth(nth($windows2correct, $j), 2);
                  }
              }
        }
        @if $isBadWindow == false {
          z-index: $i;
        }
      }
    }
    &::before, &::after {
      content: "";
      display: block;
      position: absolute;
    } 
  }
}

@mixin block($x, $y, $w, $d, $h, $c) {
  // top
  background: $c;
  width: $size*$w;
  height: $size*$d;
  transform: translate($size * ($x + $h),$size * -($y + $h));
  // left
  &::before {
    background: ($c - #333333);
    top: 0;
    left: -$size*$h;
    width: $size*$h;
    height: $size*$d;
    transform: skewY(-45deg) {
      origin: 100% 0%;
    };
  }
  // right
  &::after {
    background: ($c - #181818);
    bottom: -$size*$h;
    left: 0;
    width: $size*$w;
    height: $size*$h;
    transform: skewX(-45deg) {
      origin: 0% 0%;
    };
  }
}

@mixin window($x, $y, $w, $h, $onLeft) {
  background-color: #111;
  transform-origin: 0 100%;
  // deal with window placement on either side of block
  @if $onLeft == false {
    width: $size*$w;
    height: $size*$h;
    transform: translate($size*$x,-$size*$y) skewX(-45deg);
  }
  @else {
    width: $size*$h;
    height: $size*$w;
    transform: translate($size*$x,-$size*$y) skewY(-45deg);
  }
}

// render castle
@for $p from 1 through $pieces {
  $b: $p;
  $w: $p - length($blocks);
  ._#{$p} {
    @if $p <= length($blocks) {
      @include block(
          nth(nth($blocks, $b), 1), 
          nth(nth($blocks, $b), 2), 
          nth(nth($blocks, $b), 3), 
          nth(nth($blocks, $b), 4), 
          nth(nth($blocks, $b), 5), 
          nth(nth($blocks, $b), 6)
        );
    }
    @else {
      @include window(
          nth(nth($windows, $w), 1), 
          nth(nth($windows, $w), 2), 
          nth(nth($windows, $w), 3), 
          nth(nth($windows, $w), 4), 
          nth(nth($windows, $w), 5)
        );
    }
  }
}

HTML

Isometric Castle

css3, temple

编辑器支持Emmet

快捷键

Isometric Castle

css3, temple

CSS3 中国风格的寺庙 | 庙宇

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：