Smoke Animation Effect On Text By Using Html Css

May 10, 2020

Rahul

Hello, guys today we will learn How to make a smoke animation effect on the text by using HTML & CSS

First we need to create two files index.html and style.css then we need to do code for it.

Step:1

Add below code inside index.html

<!DOCTYPE html>
<html>
<head>
    <title>Smoke</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
   <div class="smoke" >
        <ul>
            <li><img src="logo.png"></li>
            <li>S</li>
            <li>t</li>
            <li>a</li>
            <li>c</li>
            <li>k</li>
            <li>f</li>
            <li>i</li>
            <li>n</li>
            <li>d</li>
            <li>o</li>
            <li>v</li>
            <li>e</li>
            <li>r</li>
        </ul> 
        <div class="thankyousec">
            <div class="colmun-grid">
                <div class="logo-stack">
                    <img src="logo-stack.png">
                </div>
            </div>     
        </div>   
    </div>
</body>
</html>

Step:2

Then we need to add code for style.css which code i provide in below screen.

* {
    font-family: 'Roboto', sans-serif; 
} 
body {
    margin:0;
    padding:0;
    background: #000;
    height: 100vh;
}

.smoke {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.smoke ul {
    margin:0;
    padding:0;
    display:flex;
    align-items: center;  
    text-align: center;  
}

.smoke ul li {
    list-style:none;
    font-weight:bold;
    letter-spacing:10px;
    filter:blur(1px);
    color:#fff;
    font-size:6em;
    display: inline-block; 
}


.smoke ul:hover li {
    animation: smoke 2s linear forwards;
}


@keyframes smoke {
    0% {
        transform: rotate(0deg) translateY(0px);
        opacity: 1;
        filter:blur(1px);
    }
    100% {
      transform: rotate(45deg) translateY(-200px);
        opacity: 0;
        filter:blur(20px);
    }
}
li > img {
    width: 100%;
} 
.smoke ul li:nth-child(1){
    align-items: center;
    display: flex;
    animation-delay:0s;
    width: 1.5em; 
    margin-right: 20px;
}
.smoke ul li:nth-child(2){
    animation-delay:.4s
}
.smoke ul li:nth-child(3){
    animation-delay:.8s
}
.smoke ul li:nth-child(4){
    animation-delay:1.2s
}
.smoke ul li:nth-child(5){
    animation-delay:1.6s
}
.smoke ul li:nth-child(6){
    animation-delay:2s
}
.smoke ul li:nth-child(7){
    animation-delay:2.4s
}
.smoke ul li:nth-child(8){
    animation-delay:2.8s
}
.smoke ul li:nth-child(9){
    animation-delay:3.2s
}
.smoke ul li:nth-child(10){
    animation-delay:3.6s
}
.smoke ul li:nth-child(11){
    animation-delay:4s
}
.smoke ul li:nth-child(12){
    animation-delay:4.4s
}
.smoke ul li:nth-child(13){
    animation-delay:4.8s
}
.smoke ul li:nth-child(14){
    animation-delay:5.2s
}
/******** Extra *************/
.smoke.thankyou {
    width: 100%;
}
.thankyousec {
    height: 0;
    opacity: 0;
    transition: opacity 1s; 
}
.thankyou .thankyousec {
    opacity: 1;
    height: auto;
}
.smoke.thankyou > ul {
    display: none;
}
.thankyousec  h1 {
    color: #fff;
    font-size: 65px;
    margin: 0;
    line-height: 75px;
}
.thankyousec  span {
    color: #fff;
    font-size: 30px;
}
.colmun-grid {
    display: grid;
    grid-template-columns: 150px auto;
    column-gap: 20px;
    align-items: center;
    justify-content: center; 
}
.logo-stack > img {
    width: 100%;
    background: #fff;
    border-radius: 50%;
}

Simple way to create smoke effect using online tool

For a seamless way to create videos showcasing effects like this Smoke Animation, you can use tools like FlexClip. It’s a user-friendly platform that allows you to easily design and customize animations, perfect for sharing your creative projects online.

Output:

Leave a Comment Cancel reply