CodePen Embed - Knight Rider <hr>

<h2>Knight of the Phoenix</h2>

<p>I am the Knight Industries Three Thousand. You may call me "K.I.T.T." </p>

<hr>


<h2> Trust Doesn't Rust </h2>

<p>I am the Knight Automated Roving Robot, KARR if you prefer. I am the prototype of the car of the future!</p>

<hr>

body {
  @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono);
  font-family: 'Ubuntu Mono', sans-serif;
  padding: 0.25rem;
  max-width: 500px;
  margin:0 auto;
  background-color:#180E15;
}

h2{
  color:#FF476A;
  text-align:center;
}

p{
  color:#4A3247;
  text-align:center;
}

hr{
  display:block;
  margin:0 auto;
  height:15px;
  width:105px;
  border:none;
  border-radius: 3px;
  border-left:15px solid #f00000;
  border-right:15px solid #300000;
  animation: KITTAnim 1s infinite ease-in-out alternate;
}

hr:before{
  content:" ";
  display:inline-block;
  width:15px;
  height:15px;
  border-left:15px solid #c00000;
  border-right:15px solid #600000;
  animation: KITTAnimBefore 1s infinite ease-in-out alternate;
}

hr:after{
  content:" ";
  display:inline-block;
  width:15px;
  height:15px;
  border-left:15px solid #300000;
  background-color:#300000;
  border-right:15px solid #300000;
  animation: KITTAnimAfter 1s infinite ease-in-out alternate;
}

hr:nth-child(even)
{
  animation: KARRAnim 1s infinite ease-in-out alternate;
}

hr:nth-child(even):after
{
  animation: KARRAnimAfter 1s infinite ease-in-out alternate;
}

hr:nth-child(even):before
{
  animation: KARRAnimBefore 1s infinite ease-in-out alternate;
}

/**
    Keyframes
Do not try at home

**/


@keyframes KITTAnim {
   0% {
      background-color:#300000;
      border-left:15px solid #f00000;
      border-right:15px solid #300000;
   }
   10% {
      background-color:#300000;
      border-left:15px solid #f00000;
      border-right:15px solid #300000;
   }
   20% {
      background-color:#300000;
      border-left:15px solid #c00000;
      border-right:15px solid #300000;
   }
   30% {
      background-color:#300000;
      border-left:15px solid #a00000;
      border-right:15px solid #300000;
   }
   40% {
      background-color:#300000;
      border-left:15px solid #600000;
      border-right:15px solid #300000;
   }
   50% {
      background-color:#600000;
      border-left:15px solid #300000;
      border-right:15px solid #300000;
   }
   60% {
      background-color:#a00000;
      border-left:15px solid #300000;
      border-right:15px solid #600000;
   }
   70% {
      background-color:#c00000;
      border-left:15px solid #300000;
      border-right:15px solid #a00000;
   }
   80% {
      background-color:#f00000;
      border-left:15px solid #300000;
      border-right:15px solid #c00000;
   }
   90% {
      background-color:#c00000;
      border-left:15px solid #300000;
      border-right:15px solid #f00000;
   }
   100% {
      background-color:#c00000;
      border-left:15px solid #300000;
      border-right:15px solid #f00000;
   }
}

@keyframes KITTAnimBefore {
   0% {
      background-color:#a00000;
      border-left:15px solid #c00000;
      border-right:15px solid #600000;
   }
   10% {
      background-color:#a00000;
      border-left:15px solid #c00000;
      border-right:15px solid #600000;
   }
   20% {
      background-color:#c00000;
      border-left:15px solid #f00000;
      border-right:15px solid #a00000;
   }
   30% {
      background-color:#f00000;
      border-left:15px solid #c00000;
      border-right:15px solid #c00000;
   }
   40% {
      background-color:#c00000;
      border-left:15px solid #a00000;
      border-right:15px solid #f00000;
   }
   50% {
      background-color:#a00000;
      border-left:15px solid #600000;
      border-right:15px solid #c00000;
   }
   60% {
      background-color:#600000;
      border-left:15px solid #300000;
      border-right:15px solid #a00000;
   }
   70% {
      background-color:#300000;
      border-left:15px solid #300000;
      border-right:15px solid #600000;
   }
   80% {
      background-color:#300000;
      border-left:15px solid #300000;
      border-right:15px solid #300000;
   }
   90% {
      background-color:#300000;
      border-left:15px solid #300000;
      border-right:15px solid #300000;
   }
   100% {
      background-color:#300000;
      border-left:15px solid #300000;
      border-right:15px solid #300000;
   }
}

@keyframes KITTAnimAfter {
   0% {
      background-color:#300000;
      border-left:15px solid #300000;
      border-right:15px solid #300000;
   }
   10% {
      background-color:#300000;
      border-left:15px solid #300000;
      border-right:15px solid #300000;
   }
   20% {
      background-color:#300000;
      border-left:15px solid #600000;
      border-right:15px solid #300000;
   }
   30% {
      background-color:#600000;
      border-left:15px solid #a00000;
      border-right:15px solid #300000;
   }
   40% {
      background-color:#a00000;
      border-left:15px solid #c00000;
      border-right:15px solid #600000;
   }
   50% {
      background-color:#c00000;
      border-left:15px solid #f00000;
      border-right:15px solid #a00000;
   }
   60% {
      background-color:#f00000;
      border-left:15px solid #c00000;
      border-right:15px solid #c00000;
   }
   70% {
      background-color:#c00000;
      border-left:15px solid #a00000;
      border-right:15px solid #f00000;
   }
   80% {
      background-color:#a00000;
      border-left:15px solid #600000;
      border-right:15px solid #c00000;
   }
   90% {
      background-color:#600000;
      border-left:15px solid #300000;
      border-right:15px solid #a00000;
   }
   100% {
      background-color:#600000;
      border-left:15px solid #300000;
      border-right:15px solid #a00000;
   }
}
@keyframes KARRAnim {
   0% {
      background-color:#333300;
      border-left:15px solid #ffff00;
      border-right:15px solid #333300;
   }
   10% {
      background-color:#333300;
      border-left:15px solid #ffff00;
      border-right:15px solid #333300;
   }
   20% {
      background-color:#333300;
      border-left:15px solid #cccc00;
      border-right:15px solid #333300;
   }
   30% {
      background-color:#333300;
      border-left:15px solid #808000;
      border-right:15px solid #333300;
   }
   40% {
      background-color:#333300;
      border-left:15px solid #4c4c00;
      border-right:15px solid #333300;
   }
   50% {
      background-color:#4c4c00;
      border-left:15px solid #333300;
      border-right:15px solid #333300;
   }
   60% {
      background-color:#808000;
      border-left:15px solid #333300;
      border-right:15px solid #4c4c00;
   }
   70% {
      background-color:#cccc00;
      border-left:15px solid #333300;
      border-right:15px solid #808000;
   }
   80% {
      background-color:#ffff00;
      border-left:15px solid #333300;
      border-right:15px solid #cccc00;
   }
   90% {
      background-color:#cccc00;
      border-left:15px solid #333300;
      border-right:15px solid #ffff00;
   }
   100% {
      background-color:#cccc00;
      border-left:15px solid #333300;
      border-right:15px solid #ffff00;
   }
}

@keyframes KARRAnimBefore {
   0% {
      background-color:#808000;
      border-left:15px solid #cccc00;
      border-right:15px solid #4c4c00;
   }
   10% {
      background-color:#808000;
      border-left:15px solid #cccc00;
      border-right:15px solid #4c4c00;
   }
   20% {
      background-color:#cccc00;
      border-left:15px solid #ffff00;
      border-right:15px solid #808000;
   }
   30% {
      background-color:#ffff00;
      border-left:15px solid #cccc00;
      border-right:15px solid #cccc00;
   }
   40% {
      background-color:#cccc00;
      border-left:15px solid #808000;
      border-right:15px solid #ffff00;
   }
   50% {
      background-color:#808000;
      border-left:15px solid #4c4c00;
      border-right:15px solid #cccc00;
   }
   60% {
      background-color:#4c4c00;
      border-left:15px solid #333300;
      border-right:15px solid #808000;
   }
   70% {
      background-color:#333300;
      border-left:15px solid #333300;
      border-right:15px solid #4c4c00;
   }
   80% {
      background-color:#333300;
      border-left:15px solid #333300;
      border-right:15px solid #333300;
   }
   90% {
      background-color:#333300;
      border-left:15px solid #333300;
      border-right:15px solid #333300;
   }
   100% {
      background-color:#333300;
      border-left:15px solid #333300;
      border-right:15px solid #333300;
   }
}

@keyframes KARRAnimAfter {
   0% {
      background-color:#333300;
      border-left:15px solid #333300;
      border-right:15px solid #333300;
   }
   10% {
      background-color:#333300;
      border-left:15px solid #333300;
      border-right:15px solid #333300;
   }
   20% {
      background-color:#333300;
      border-left:15px solid #4c4c00;
      border-right:15px solid #333300;
   }
   30% {
      background-color:#4c4c00;
      border-left:15px solid #808000;
      border-right:15px solid #333300;
   }
   40% {
      background-color:#808000;
      border-left:15px solid #cccc00;
      border-right:15px solid #4c4c00;
   }
   50% {
      background-color:#cccc00;
      border-left:15px solid #ffff00;
      border-right:15px solid #808000;
   }
   60% {
      background-color:#ffff00;
      border-left:15px solid #cccc00;
      border-right:15px solid #cccc00;
   }
   70% {
      background-color:#cccc00;
      border-left:15px solid #808000;
      border-right:15px solid #ffff00;
   }
   80% {
      background-color:#808000;
      border-left:15px solid #4c4c00;
      border-right:15px solid #cccc00;
   }
   90% {
      background-color:#4c4c00;
      border-left:15px solid #333300;
      border-right:15px solid #808000;
   }
   100% {
      background-color:#4c4c00;
      border-left:15px solid #333300;
      border-right:15px solid #808000;
   }
}

// https://blog.codepen.io/rodeo/season-three/
// Rodeo entry
// Week Two
// Style your HR!
//
//
// ## ISSUES
// Breaks on the codepen preview slightly 
//
// iOS chrome 1px top out of alignment
// iOS Safari 1px top out of alignment
//
// android chrome 1px top out of alignment
// 
// ubuntu chrome works
// ubuntu FF creates duplicate :before underneath
//
// windows FF 1px top out of alignment

This Pen is owned by skelt00r on CodePen.

See more by @skelet00r on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js