a.html

  <style>
    body {
      background: rgba(255,255,255,1.0);
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
      font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
    }
    .logo {
      display: table;
      overflow: hidden;
      position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 50%;
      height: 50%;
      color: rgba(222,222,222,0.8);
      background-color: rgba(0, 0, 0, 0.475);
      border-radius: 0.5em;
      transition: background 0.5s;
      text-align: center;
      font-size: 2.75em;
      animation: shadow 1s infinite;
    }
    .logo:hover {
      background-color: rgba(0, 0, 0, 0.575);
    }
    .logo:active {
      color: rgba(222,222,222,1.0);
    }
    .logo > div {
      display: table-cell;
      vertical-align: middle;
      opacity: 0.5;
      animation: pulsate 1s infinite;
    }
    @keyframes gradientBG {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
    @keyframes pulsate {
      0% { 
        transform: scale(1.0);
      }
      50% { 
        transform: scale(1.125);
      }
      100% { 
        transform: scale(1.0);
      }
    }
    @keyframes shadow {
      0% {
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
      }
      100% {
        box-shadow: 0 0 0 35px rgba(0, 0, 0, 0);
      }
    }
  </style>
  <div class="logo">
    <div>Test</div>
  </div>