<html>
<body>
<div>11:11</div>
  </body>
</html>
/* Credit goes to: Joshua Ward-https://codepen.io/joshuaward/pen/RgOxKd */
body{
  background: black;
}



$base-duration: 300ms;

// Colors
$color-1: #E91E63;
$color-2: #03A9F4;
$color-3: #2ecc71;
$black: #000;

// Breakpoints
$sm: new-breakpoint(min-width 320px);
$med: new-breakpoint(min-width 768px);
$lg: new-breakpoint(min-width 1024px);

*, *:before, *:after {
  box-sizing: border-box;
  outline: none;
}

html {
  font-family: 'Times New Roman', sans-serif;
  font-size: 26px;
  font-smooth: auto;
  font-weight: bold;
  line-height: 1.5;
  color: white;
}

body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  // background-color:darken($color-1, 4%);
}

div {
  font-size: 200px; 
  &:hover {
    &:before, &:after{
      position: absolute;
      content: '11:11';
      transform: translate(-50%,-50%);
      z-index: -1;
    }

    &:before {
      top: 49.5%;
      left: 49.5%;
      color: rgba($color-1,0.8);
      animation: distort1 $base-duration linear infinite;
    }

    &:after {
      top: 50.5%;
      left: 50.5%;
      color: rgba($color-2,0.8);
      animation: distort2 $base-duration linear infinite;
    }
  }
  
  @keyframes distort1 {
    0%    { top: 49.5%; left: 49.5%; }
    12.5% { top: 49.5%; left: 50%; }
    25%   { top: 49.5%; left: 50.5%; }
    37.5% { top: 50%; left: 50.5%; }
    50%   { top: 50.5%; left: 50.5%; }
    62.5% { top: 50.5%; left: 50%; }
    75%   { top: 50.5%; left: 49.5%; }
    87.5% { top: 50%; left: 49.5%; }
    100%  { top: 49.5%; left: 49.5%; }
  }
  
  @keyframes distort2 {
    0%    { top: 50.5%; left: 50.5%; }
    12.5% { top: 50%; left: 50.5%; }
    25%   { top: 49.5%; left: 50.5%; }
    37.5% { top: 49.5%; left: 50%; }
    50%   { top: 49.5%; left: 49.5%; }
    62.5% { top: 50%; left: 49.5%; }
    75%   { top: 50.5%; left: 49.5%; }
    87.5% { top: 50.5%; left: 50%; }
    100%  { top: 50.5%; left: 50.5%; }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.