Blazing Fire
Animated text effects using CSS3 text-shadow to give text headers a blazing flame
Animated text effects using CSS3 text-shadow to give text headers a blazing flame
<div class="dark fire"> | |
<h1 class="Blazing" contenteditable="true">BLAZING</h1> | |
</div> |
@import url(https://fonts.googleapis.com/css?family=Akronim); | |
body { | |
background: #ca8; | |
} | |
.fire { | |
margin: 50px auto; | |
width: 80%; | |
max-width: 1000px; | |
height: 200px; | |
background-position: center center; | |
background-size: 1000px 200px; | |
border-radius: 10px; | |
font-family: 'Akronim'; | |
overflow: hidden; | |
text-align: center; | |
vertical-align: middle; | |
} | |
.fire:before { | |
content: ''; | |
display: inline-block; | |
height: 100%; | |
vertical-align: middle; | |
} | |
.Blazing { | |
display: inline-block; | |
margin: 0; | |
color: rgb(255, 115, 0); | |
font-size: 100px; | |
line-height: 50px; | |
min-width: 50px; | |
outline: none; | |
vertical-align: middle; | |
text-shadow: | |
0 3px 20px red, | |
0 0 20px red, | |
0 0 10px orange, | |
4px -5px 6px yellow, | |
-4px -10px 10px yellow, | |
0 -10px 30px yellow; | |
animation: 2s Blazing infinite alternate linear; | |
} | |
@keyframes Blazing { | |
0% { text-shadow: 0 3px 20px red, 0 0 20px red, | |
0 0 10px orange, | |
0 0 0 yellow, | |
0 0 5px yellow, | |
-2px -5px 5px yellow, | |
4px -10px 10px yellow; } | |
25% { text-shadow: 0 3px 20px red, 0 0 30px red, | |
0 0 20px orange, | |
0 0 5px yellow, | |
-2px -5px 5px yellow, | |
3px -10px 10px yellow, | |
-4px -15px 20px yellow; } | |
50% { text-shadow: 0 3px 20px red, 0 0 20px red, | |
0 -5px 10px orange, | |
-2px -5px 5px yellow, | |
3px -10px 10px yellow, | |
-4px -15px 20px yellow, | |
2px -20px 30px rgba(255,255,0,0.5); } | |
75% { text-shadow: 0 3px 20px red, 0 0 20px red, | |
0 -5px 10px orange, | |
3px -5px 5px yellow, | |
-4px -10px 10px yellow, | |
2px -20px 30px rgba(255,255,0,0.5), | |
0px -25px 40px rgba(255,255,0,0)} | |
100% { text-shadow: 0 3px 20px red, 0 0 20px red, | |
0 0 10px orange, | |
0 0 0 yellow, | |
0 0 5px yellow, | |
-2px -5px 5px yellow, | |
4px -10px 10px yellow; } | |
} |