css smoke effect background-HTML5 CSS Smoke Effect

In This Article

1 Hello Guys, here is another interesting effect using HTML and CSS, review below code and comment below what you think about it.
2 CSS Source:

See the Pen
HTML5 CSS Smoke Effect by Bikash Panda (@phpcodertech)
on CodePen.

Hello Guys, here is another interesting effect using HTML and CSS, review below code and comment below what you think about it.

Your work looks like this,

HTML Source:

animate.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<link type="text/css" href="style.css">
</head>
<body>
<section><video src="Smoke.mp4" autoplay muted></video>
<h1>
<span>P</span>
<span>H</span>
<span>P</span>
<span>C</span>
<span>O</span>
<span>D</span>
<span>E</span>
<span>R</span>
</h1>
</section>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>

</h1>

</section>

</body>

</html>

CSS Source:

animate.css

body
{
margin: 0;
padding: 0;
}
section{
height:100vh;
background: #000;
}
section:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, red , yellow,#FF8700, yellow, red);
mix-blend-mode: color;
pointer-events: none;
}
video{
object-fit: cover;
height: 100%;
width: 100%;
}
h1{
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #ddd;
font-size: 5em;
font-family: sans-serif;
letter-spacing: 0.2em;
}
h1 span{
display: inline-block;
animation: animate 1s linear forwards;
}
@keyframes animate{
0%{
opacity: 0;
transform: rotateY(90deg);
filter: blur(10px);
}
100%{
opacity: 1;
transform: rotateY(0deg);
filter: blur(0px);
}
}
h1 span:nth-child(1)
{
animation-delay:1s;
}
h1 span:nth-child(2)
{
animation-delay:2s;
}
h1 span:nth-child(3)
{
animation-delay:2.5s;
}
h1 span:nth-child(4)
{
animation-delay:3s;
}
h1 span:nth-child(5)
{
animation-delay:3.5s;
}
h1 span:nth-child(6)
{
animation-delay:4s;
}
h1 span:nth-child(7)
{
animation-delay:4.5s;
}
h1 span:nth-child(8)
{
animation-delay:5s;
}

body

{

margin: 0;

padding: 0;

}

section{

height:100vh;

background: #000;

}

section:before{

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-image: linear-gradient(to right, red , yellow,#FF8700, yellow, red);

mix-blend-mode: color;

pointer-events: none;

}

video{

object-fit: cover;

height: 100%;

width: 100%;

}

h1{

margin: 0;

padding: 0;

position: absolute;

top: 50%;

transform: translateY(-50%);

width: 100%;

text-align: center;

color: #ddd;

font-size: 5em;

font-family: sans-serif;

letter-spacing: 0.2em;

}

h1 span{

display: inline-block;

animation: animate 1s linear forwards;

}

@keyframes animate{

0%{

opacity: 0;

transform: rotateY(90deg);

filter: blur(10px);

}

100%{

opacity: 1;

transform: rotateY(0deg);

filter: blur(0px);

}

h1 span:nth-child(1)

{

animation-delay:1s;

}

h1 span:nth-child(2)

{

animation-delay:2s;

}

h1 span:nth-child(3)

{

animation-delay:2.5s;

}

h1 span:nth-child(4)

{

animation-delay:3s;

}

h1 span:nth-child(5)

{

animation-delay:3.5s;

}

h1 span:nth-child(6)

{

animation-delay:4s;

}

h1 span:nth-child(7)

{

animation-delay:4.5s;

}

h1 span:nth-child(8)

{

animation-delay:5s;

}

If anyone wants this background video to ping me on the comment box.
Thank You and Happy Coding..!

Was this article helpful?

YesNo

4 thoughts on “HTML5 CSS Smoke Effect”

Sal Monella May 1, 2019 at 4:49 am

Such nice Post!

Ronald van Voorthuizen September 7, 2019 at 7:41 pm

Not really what I call “HTML5 CSS Smoke Effect”, but OK.

shailen April 12, 2020 at 10:12 pm

great work ,can i get video please thanks