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>

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;
}

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

Was this article helpful?

YesNo