creating flashing titles

Firstly

You should choose a title using the element h1, h2, h3,button, etc...
Write the class Blinking-title and right after closing the curly brace, write the title name, in my case, I used the h1 element.

Next, create a CSS file named style.css

Now in CSS, start by editing the body using margin: 0px; (This removes the default margins that may be applied by the browser), overflow: hidden (means that any content exceeding the bounds of the viewport will be hidden); display: flex; (it's used to center the content both vertically and horizontally on the page); justify-content: center (used to center elements horizontally along the main axis); align-items: center (used to center elements vertically along the cross axis); height: 100vh (This ensures that the body of the page occupies the full height of the viewport); background-color: #000 (page background as black);

Next, we will define the properties of the class called Blinking-title.
font-size: 36px (Defines the font size of the text inside the element), font-weight: bold (makes the text bold), text-transform: uppercase (This makes the text display in uppercase letters), animation: blink 0.25s infinite alternate (Defines an animation named "blink" with a duration of 0.25 seconds that runs infinitely in an alternating manner), color: gold (sets the text color to gold), padding: 45% (creates internal padding of 45% of the element's size).

Now let's define the animation for all of this hahaha :)

@ keyframes blink will define an animation rule with the name blink, obvious,this animation will occur between 0 to 100%.


Let's set the start of the animation with the color gold at 0% and the color red at 100%, which will make the letters blink like a Christmas tree.HAHA

And now, it's just a matter of waiting for the magic to happen :)

Thank You

If anyone has a simpler way to do this, please comment and explain it to me. I would be very grateful! And if you can follow my profile, I would be even more grateful, haha!

>>>My profile<<<