Screenshot 2024 10 23 14 47 43 762 com.google.android.youtube

Create html css smoke animation

Source codes:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title> Smoke fog </title>
<style type=”text/css”>
body{
background: black;
}
.smoke{
position: absolute;
z-index: 3;
width: 1px ;
height: 160px;
left: 50%;
bottom: 50%;

}
.smoke span{
display: block;
position: absolute;
bottom: -35px;
left: 50%;
margin-left: -20px;
height: 0px;
width: 0px;
border: 35px solid #f34b84;
border-radius: 35px ;
left: -14px;
opacity: 0;
transform: scale(0.2);
}
@keyframes smokeL{
0%{
transform: scale(0.2) translate(0, 0);
}
10%{
opacity: 1;
transform: scale(0.2) translate(0, -5px);
}
100%{
opacity: 0;
transform: scale(1) translate(-20px, -130px);
}
}
@keyframes smokeR{
0%{
transform: scale(0.2) translate(0,0);
}
10%{
opacity: 1;
transform: scale(0.2) translate(0, -5px);
}
100%{
opacity: 0;
transform: scale(1) translate(20px, -130px);
}
}
.smoke .smk0{
animation: smokeL 10s 0s infinite;
}
.smoke .smk1{
animation: smokeR 10s 1s infinite;
}
.smoke .smk2{
animation: smokeL 10s 2s infinite;
}
.smoke .smk3{
animation: smokeR 10s 3s infinite;
}
.smoke .smk4{
animation: smokeL 10s 4s infinite;
}
.smoke .smk5{
animation: smokeR 10s 5s infinite;
}
.smoke .smk6{
animation: smokeL 10s 6s infinite;
}
.smoke .smk7{
animation: smokeR 10s 7s infinite;
}
.smoke .smk8{
animation: smokeL 10s 8s infinite;
}
.smoke .smk9{
animation: smokeR 10s 9s infinite;
}
</style>
</head>
<body>

<div class=”smoke”>
<span class=”smk0″></span>
<span class=”smk1″></span>
<span class=”smk2″></span>
<span class=”smk3″></span>
<span class=”smk4″></span>
<span class=”smk5″></span>
<span class=”smk6″></span>
<span class=”smk7″></span>
<span class=”smk8″></span>
<span class=”smk9″></span>
</div>

</body>
</html>

Scroll to Top