In this tutorial, we are going to tell you how to add the colorpulse effect to your text and background through CSS. Sometimes we want to give multi colors to our text or background, this can be simply done by adding some simple CSS. By adding this CSS you can give multi-color to your text and background too. You can set the pulse time and see the changing color. For pulsing the background color You just need to inspect class/ID of the content block for which you want to add background pulse effect. Example :-
HTML:
<div class="yourbg">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>Using this class i will add pulse background color to this block. CSS
.yourbg{ color: #fff; background-color: #45CEEF; -webkit-animation: colorpulse 4s infinite alternate; animation: colorpulse 4s infinite alternate; } @-webkit-keyframes colorpulse { 0% { background-color: #009e85; } 25% { background-color: #ea309c; } 50% { background-color: #f59c0d; } 75% { background-color: #2482b9; } } @keyframes colorpulse { 0% { background-color: #009e85; } 25% { background-color: #ea309c; } 50% { background-color: #f59c0d; } 75% { background-color: #2482b9; } }Modify code:
You can change color pulse timing from current 4s to your desired.
For pulsing the Text You just need to inspect class/ID of the content block for which you want to add text pulse effect. Example :-
HTML:<div class="yourtext">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>CSS
.yourtext{ background: #fff; color: #45CEEF; -webkit-animation: colorpulsetext 4s infinite alternate; animation: colorpulsetext 4s infinite alternate; } @-webkit-keyframes colorpulsetext { 0% { color: #009e85; } 25% { color: #ea309c; } 50% { color: #f59c0d; } 75% { color: #2482b9; } } @keyframes colorpulsetext { 0% { color: #009e85; } 25% { color: #ea309c; } 50% { color: #f59c0d; } 75% { color: #2482b9; }Modify code:
You can change color pulse timing from current 4s to your desired.
Final Words- I hope this article will be helpful for you. If you have any query related to article post your comment below and also give us valuable feedback.
Read More –
