Show color changing TAG LINE in the website

Hello World

Here is one awesome CSS code. You can showcase your header to TAG-LINE with color changing option. 

Lets Start....

Step 1: Go to https://www.blogger.com/

Select THEME then click CUSTOMISE

Then Click Advanced after that select Add CSS. 

Code is Here 

<> Copy from here <>
.center {
  margin: 0 auto;
}

.awesome {
  font-family: futura;
  font-style: italic;

  width: 100%;

  margin: 0 auto;
  text-align: center;

  color: #313131;
  font-size: 45px;
  font-weight: bold;
  position: absolute;
  -webkit-animation: colorchange 20s infinite alternate;
}

@-webkit-keyframes colorchange {
  0% {
    color: blue;
  }

  10% {
    color: #8e44ad;
  }

  20% {
    color: #1abc9c;
  }

  30% {
    color: #d35400;
  }

  40% {
    color: blue;
  }

  50% {
    color: #34495e;
  }

  60% {
    color: blue;
  }

  70% {
    color: #2980b9;
  }
  80% {
    color: #f1c40f;
  }

  90% {
    color: #2980b9;
  }

  100% {
    color: pink;
  }

/*--------- Text selection Customization by Twistblogger------------- */
::selection {
background:#e67e22; /*------This is the background color on selection-----*/
color:#fff; /*------This is text color on selection-----*/
}
::-moz-selection {
background:#e67e22;
color:#fff
}
::-webkit-selection {
background:#e67e22;
color:#fff
}
}

body {
  margin: 0;
}

svg {
  height: 100vmin;
  left: calc(50% - 50vmin);
  position: relative;
  width: 100vmin;
}

.ball-top {
  animation: BallTopMove 4s both infinite;
  motion-path: path("m 66.2,39.264578 c 0,0 -5.195345,-18.056477 -20.4,-18.056477 -15.204655,0 -20.4,17.930208 -20.4,17.930208");
  offset-path: path("m 66.2,39.264578 c 0,0 -5.195345,-18.056477 -20.4,-18.056477 -15.204655,0 -20.4,17.930208 -20.4,17.930208");
  motion-offset: 0%;
  offset-distance: 0%;
}

.ball-bottom {
  animation: BallBottomMove 4s both infinite;
  motion-path: path("m 66.2,58.979615 c 0,0 -5.195345,18.056477 -20.4,18.056477 -15.204655,0 -20.4,-17.930208 -20.4,-17.930208");
  offset-path: path("m 66.2,58.979615 c 0,0 -5.195345,18.056477 -20.4,18.056477 -15.204655,0 -20.4,-17.930208 -20.4,-17.930208");
  motion-offset: 100%;
  offset-distance: 100%;
}

.thinkMaskCircle {
  animation: ClipSmallMove 4s both infinite;
}

.createMaskCircle {
  animation: ClipBigMove 4s both infinite;
}

@keyframes BallTopMove {
  0% {
    motion-offset: 0%;
    offset-distance: 0%;
    transform: scale(0);
  }
  10% { transform: scale(1); }
  42.5% { transform: scale(1); }
  50% {
    motion-offset: 100%;
    offset-distance: 100%;
    transform: scale(0);
  }
  100% {
    motion-offset: 100%;
    offset-distance: 100%;
    transform: scale(0);
  }
}

@keyframes BallBottomMove {
  0% {
    motion-offset: 100%;
    offset-distance: 100%;
    transform: scale(0);
  }
  50% {
    motion-offset: 100%;
    offset-distance: 100%;
    transform: scale(0);
  }
  60% { transform: scale(1); }
  92.5% { transform: scale(1); }
  100% {
    motion-offset: 0%;
    offset-distance: 0%;
    transform: scale(0);
  }
}

@keyframes ClipSmallMove {
  0% { transform: translateY(-63%); }
  17.5% { transform: translateY(-63%); }
  50% { transform: translateY(0%); }
  62.5% { transform: translateY(63%); }
  100% { transform: translateY(63%); }
}

@keyframes ClipBigMove {
  0% { transform: translateY(0%); }
  17.5% { transform: translateY(-63%); }
  50% { transform: translateY(-63%); }
  62.499% { transform: translateY(-63%); }
  62.5% { transform: translateY(63%); }
  100% { transform: translateY(0%); }
}
<> Copy above this line <>

copy the entire code and paste in the ADD CUSTOM CSS field then click Apply to Blog

Step 2: Editing HTML Code

Now again go to Theme, click EDIT HTML

Now Try to find the Header section <header by clicking "Ctrl+F" from keyboard.

copy this code →
      <div class='clear'/>

        <div class='center'>        <p class='awesome'> Search Anything, Anytime, Anywhere Digitally </p>

</div>

Replace Search Anything, Anytime, Anywhere Digitally with your own words/sentences. 

Your tag line will be shown in the head section.

If you want to show the same it the bottom of the page. Do follow the same rules and paste the code before closing of the body i.e. 

find </body> and paste the same code above there.

-----------------------------------------------

       <div class='clear'/>
       <div class='center'>        
       <p class='awesome'> Search Anything, Anytime, Anywhere Digitally </p>
      </div>

-------------------------

see the screen shot

Enjoy it by showing to the world. Thank You ! 

searchofy