HTML Blinking and Flashing Header

Written by @kerixa 29 March 2021

To make the appearance of websites more beautiful, special styles are usually used. One of such styles is provided in the following code, which shows a blinking and flashing text that can be the title or header of your website. This code is specially suitable for web pages with dark backgrounds.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
    background: #111;
    font-family: "Open Sans", Impact;
}

.area {
    text-align: center;
    font-size: 2.5em;
    color: #fff;
    letter-spacing: -3px;
    font-weight: 700;
    text-transform: uppercase;
    animation: blur .75s ease-out infinite;
    text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}

@keyframes blur {
from {
    text-shadow: 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 50px #fff, 0px 0px 50px #fff, 0px 0px 50px #7B96B8, 0px 0px 150px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px -10px 100px #7B96B8, 0px -10px 100px #7B96B8;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="area">⚠ Html best codes ⚠</div><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
advertisement 2