Smoke Animation Effect On Text By Using Html CSS

#html #css #javascript #beginners

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

Hello, Guys Today we create an awesome Text Smoke Animation Effect. This Animation is cool for your website and we use only HTML5 and CSS3. If you find awesome animation then you are in the right place. Here is the code of Smoke Animation Effect On 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.

Smoke Animation 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>

Smoke Animation Step:2

Then we need to add code for style.css which code I provide in the 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%;
}