HTML Blinking and Flashing Header
Written by 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 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='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
Jenisha, Mr Joseph Charles, Nikhil 999+, bishalthakur
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!