MRT CSS Practice

In this example below you will see how to do a MRT CSS Practice with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by arty0412, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright arty0412 ©
  • HTML
  • CSS
  • JavaScript
    
.map
  .cell
    .point(title="B1" data-title-type="1")
    .line(data-direction="0")
    .line(data-direction="2")
  .cell
    .point(title="B2")
    .line(data-direction="6")
    .line(data-direction="2")
  .cell
    .point(title="B3")
    .line(data-direction="0")
    .line(data-direction="1")
    .line(data-direction="2")
    .line(data-direction="3")
    .line(data-direction="4")
    .line(data-direction="5")
    .line(data-direction="6")
    .line(data-direction="7")
  .cell
    .point(title="B4")
    .line(data-direction="0")
    .line(data-direction="1")
    .line(data-direction="2")
    .line(data-direction="3")
    .line(data-direction="4")
    .line(data-direction="5")
    .line(data-direction="6")
    .line(data-direction="7")
  .cell
    .point(title="B1")
    .line(data-direction="0")
    .line(data-direction="2")
  .cell
    .point(title="B2")
    .line(data-direction="3")
    .line(data-direction="4")
  .cell
    .point(title="B3")
    .line(data-direction="6")
    .line(data-direction="2")
  .cell
    .point(title="B4")
    .line(data-direction="0")
    .line(data-direction="6")
  .cell
    .point(title="B1")
    .line(data-direction="0")
    .line(data-direction="2")
  .cell
    .point(title="B2")
    .line(data-direction="6")
    .line(data-direction="4")
  .cell
    .point(title="B3")
    .line(data-direction="6")
    .line(data-direction="2")
  .cell
    .point(title="B4")
    .line(data-direction="0")
    .line(data-direction="6")
  .cell
    .point(title="B1")
    .line(data-direction="0")
    .line(data-direction="2")
  .cell
    .point(title="B2")
    .line(data-direction="6")
    .line(data-direction="4")
  .cell
    .point(title="B3")
    .line(data-direction="6")
    .line(data-direction="2")
  .cell
    .point(title="B4")
    .line(data-direction="0")
    .line(data-direction="6")

/*Downloaded from https://www.codeseek.co/arty0412/mrt-css-practice-eMNQjz */
    $color-BR:rgb(204, 143, 43);
$color-R:rgb(206, 0, 37);
$color-G:rgb(0, 114, 68);
$color-O:rgb(255, 144, 0);
$color-BL:rgb(25, 106, 190);
.map {
  display: flex;
  flex-wrap: wrap;
  width: 50px*20;
  padding: 50px;
}
.cell {
  display: flex;
  width: 50px;
  height: 50px;
  //border: 1px solid #ccc;
  justify-content: center;
  align-items: center;
  position: relative;
  //overflow: hidden;
  .point {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    box-shadow: 0 0 0 2px #333;
    background: #fff;
    z-index: 2;
    position: relative;
    transition: all 0.2s;
    &:before {
      content: attr(title);
      display: block;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      color: #333;
      position: absolute;
      left: 0;
      top: 0;
      white-space:nowrap;
      transform-origin:20% 40%;
      //transform:translateX(50%) translateY(-100%) rotate(-45deg);
      font-family: "Noto Sans TC", "Segoe UI", Microsoft JhengHei, Arial,
        Helvetica, sans-serif, "Arial Unicode MS", PMingLiU;
    }
    @for $i from 0 through 7 {
    &[data-title-type="#{$i}"]:before {
      $angle: -($i*45)+"deg";
      transform:translateX(50%) translateY(-100%) rotate(#{$angle});
    }
  }
  }
  &:hover {
    .point {
    }
  }
}
.line {
  width: 12px;
  border-radius:12px;
  background: #00b4ff;
  position: absolute;
  z-index: 1;
  @for $i from 0 through 7 {
    &[data-direction="#{$i}"] {
      $angle: ($i*45)+"deg";
      transform: rotate(#{$angle}) translateY(-50%);
      @if $i % 2 == 0 {
        height: 30px;
      } @else {
        height: 37px;
      }
    }
  }
}



/*Downloaded from https://www.codeseek.co/arty0412/mrt-css-practice-eMNQjz */
    

Comments