KITT

by whelkaholism

HTML

<div class='kitt'>
  <div class='kr1'></div>
  <div class='kr2'></div>
  <div class='kr3'></div>
  <div class='kr4'></div>
  <div class='kr5'></div>
  <div class='kr6'></div>
  <div class='kr7'></div>
  <div class='kr8'></div>
</div>

<div class='kitt bw'>
  <div class='kr1'></div>
  <div class='kr2'></div>
  <div class='kr3'></div>
  <div class='kr4'></div>
  <div class='kr5'></div>
  <div class='kr6'></div>
  <div class='kr7'></div>
  <div class='kr8'></div>
</div>

<div class='kitt minimalist'>
  <div class='kr1'></div>
  <div class='kr2'></div>
  <div class='kr3'></div>
  <div class='kr4'></div>
  <div class='kr5'></div>
  <div class='kr6'></div>
  <div class='kr7'></div>
  <div class='kr8'></div>
</div>

CSS

html, body {
  background: white;
  display: flex;
}

.kitt {
    border: 1px solid #cccccc;
    padding: 10px;
    border-radius: 5px;
    margin-right: 20px;
    background: #000000;
}

.kitt > * {
    width: 12px;
    height: 8px;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,238,186,1) 5%, rgba(255,214,47,1) 6%, rgba(255,111,0,1) 13%, rgba(221,16,0,1) 100%);
    margin: 0;
    display: inline-block;
    box-shadow: 0 0 7px 2px #fe2918;
    border-radius: 2px;
    animation-duration: 0.6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.kitt.bw,
.kitt.minimalist {
    background: #ffffff;
}

.kitt.bw > * {
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(168,168,168,1) 2%, rgba(218,218,218,1) 6%, rgba(187,187,187,1) 9%, rgba(0,0,0,1) 100%);
    box-shadow: 0 0 8px 1px #000000;
}

.kitt.minimalist > * {
    background: #000000;
    box-shadow: 0 0 5px -3px #000000;
}

.kr1 {
    animation-name: kr1;
}

.kr2 {
    animation-name: kr2;
}

.kr3 {
    animation-name: kr3;
}

.kr4 {
    animation-name: kr4;
}

.kr5 {
    animation-name: kr5;
}

.kr6 {
    animation-name: kr6;
}

.kr7 {
    animation-name: kr7;
}

.kr8 {
    animation-name: kr8;
}

@keyframes kr1 {
    0% {
        opacity: 1
    }

    14% {
        opacity: 0.2
    }

    29% {
        opacity: 0.05
    }

    43% {
        opacity: 0.05
    }

    57% {
        opacity: 0.05
    }

    71% {
        opacity: 0.05
    }

    86% {
        opacity: 0.05
    }

    100% {
        opacity: 0.05
    }
}

@keyframes kr2 {
    0% {
        opacity: 0.2
    }

    14% {
        opacity: 1
    }

    29% {
        opacity: 0.2
    }

    43% {
        opacity: 0.05
    }

    57% {
        opacity: 0.05
    }

    71% {
        opacity: 0.05
    }

    86% {
        opacity: 0.05
    }

    100% {
        opacity: 0.05
    }
}

@keyframes kr3 {
    0% {
        opacity: 0.05
    }

    14% {
        opacity: 0.2
    }

    29%...