With the use of coding skill like
HTML (Hypertext Markup Language),
CSS (Cascading Style Sheets) you can do anything on your browser.
This is another kind of new way to express the power of Frontend coding.
Here you can learn “CSS Grid & animation Slack logo”.
You just copy and paste into your code editor software and run it on your browser. You Don’t need to write manually it again. Just Copy & Paste.
If you don’t understand clearly so you can watch youtube videos which mention at the end of the page.

HTML

<ul class="grid">
    <li class="cell is-small is-blue"></li>
    <li class="cell is-large is-blue"></li>
    <li class="cell is-small is-green"></li>
    <li class="cell is-large is-green"></li>
    <li class="cell is-small is-red"></li>
    <li class="cell is-large is-red"></li>
    <li class="cell is-small is-yellow"></li>
    <li class="cell is-large is-yellow"></li>
</ul>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-size: 300px;
  background-repeat: no-repeat;
}
.grid {
  animation: spin 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 300px;
  height: 300px;
  grid-template-areas: ". blue-small green-large ." "blue-large blue-large green-large green-small" "red-small red-large yellow-large yellow-large" ". red-large yellow-small .";
}
.cell {
  align-items: end;
  justify-content: end;
  display: flex;
}
.cell::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100px;
}
.cell.is-large::before {
  animation: widen 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.cell.is-blue::before {
  background: #6ecadc;
}
.cell.is-blue.is-small {
  grid-area: blue-small;
}
.cell.is-blue.is-small::before {
  animation: fade 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-bottom-right-radius: 0;
}
.cell.is-blue::before {
  background: #6ecadc;
}
.cell.is-blue.is-large {
  grid-area: blue-large;
}
.cell.is-blue.is-large::before {
  animation-name: widen-w;
  margin-right: auto;
}
.cell.is-green::before {
  background: #3eb991;
}
.cell.is-green.is-small {
  grid-area: green-small;
}
.cell.is-green.is-small::before {
  animation: fade 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-bottom-left-radius: 0;
}
.cell.is-green::before {
  background: #3eb991;
}
.cell.is-green.is-large {
  grid-area: green-large;
}
.cell.is-green.is-large::before {
  animation-name: widen-h;
  margin-bottom: auto;
}
.cell.is-red::before {
  background: #e01563;
}
.cell.is-red.is-small {
  grid-area: red-small;
}
.cell.is-red.is-small::before {
  animation: fade 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-top-right-radius: 0;
}
.cell.is-red::before {
  background: #e01563;
}
.cell.is-red.is-large {
  grid-area: red-large;
}
.cell.is-red.is-large::before {
  animation-name: widen-h;
  margin-top: auto;
}
.cell.is-yellow::before {
  background: #e9a820;
}
.cell.is-yellow.is-small {
  grid-area: yellow-small;
}
.cell.is-yellow.is-small::before {
  animation: fade 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-top-left-radius: 0;
}
.cell.is-yellow::before {
  background: #e9a820;
}
.cell.is-yellow.is-large {
  grid-area: yellow-large;
}
.cell.is-yellow.is-large::before {
  animation-name: widen-w;
  margin-left: auto;
}
@-moz-keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(720deg);
  }
}
@-webkit-keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(720deg);
  }
}
@-o-keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(720deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(720deg);
  }
}
@-moz-keyframes widen-w {
  0%, 100% {
    width: 100%;
  }
  50%, 70% {
    width: 60px;
  }
}
@-webkit-keyframes widen-w {
  0%, 100% {
    width: 100%;
  }
  50%, 70% {
    width: 60px;
  }
}
@-o-keyframes widen-w {
  0%, 100% {
    width: 100%;
  }
  50%, 70% {
    width: 60px;
  }
}
@keyframes widen-w {
  0%, 100% {
    width: 100%;
  }
  50%, 70% {
    width: 60px;
  }
}
@-moz-keyframes widen-h {
  0%, 100% {
    height: 100%;
  }
  50%, 70% {
    height: 60px;
  }
}
@-webkit-keyframes widen-h {
  0%, 100% {
    height: 100%;
  }
  50%, 70% {
    height: 60px;
  }
}
@-o-keyframes widen-h {
  0%, 100% {
    height: 100%;
  }
  50%, 70% {
    height: 60px;
  }
}
@keyframes widen-h {
  0%, 100% {
    height: 100%;
  }
  50%, 70% {
    height: 60px;
  }
}
@-moz-keyframes fade {
  0%, 100% {
    transform: scale(1);
  }
  50%, 70% {
    transform: scale(0);
  }
}
@-webkit-keyframes fade {
  0%, 100% {
    transform: scale(1);
  }
  50%, 70% {
    transform: scale(0);
  }
}
@-o-keyframes fade {
  0%, 100% {
    transform: scale(1);
  }
  50%, 70% {
    transform: scale(0);
  }
}
@keyframes fade {
  0%, 100% {
    transform: scale(1);
  }
  50%, 70% {
    transform: scale(0);
  }
}

YouTube


Like Our Facebook Page For Update!