HTML and CSS Project Create Tea Cup

Hello Friends, aaj ke tutorial me apka swagat hai, aaj ke tutorial me, hum sikhenge ki ek pyara sa chai ke cup ka animation kaise banaya jaye. Is animation ko banane ke liye, hume kewal HTML aur CSS ki avashyakta hai. Meine is animation ko banane ke liye libraries, icons aur images ka use nahi kiya hai.

HTML and CSS Project Create Tea Cup

HTML and CSS Project Create Tea Cup

Yah ek intermediate-level CSS Animation Project hai. Charan dar charan prakriya ke sath, hum yah animation banaenge. Mei apko is tutorials ke sath kuch naya aur kuch new CSS properties ke bare me bataunga jisse apko kuch naya sikhne ko milega. Yadi ap apne CSS skills ko behtar banane ke liye aise aur projects ki talash me hain to apko yahan is playlist ko dekhna chahiye. Is playlist me apke CSS skills ko badhane me madad karne ke liye tutorial ka ek bunch shamil hai.

Full Code:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML and CSS Project Create Tea Cup</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: rgb(98, 121, 154);
        }
        .container{
            position: relative;
            top: 50px;
        }
        .cup{
            position: relative;
            width: 280px;
            height: 300px;
            background: linear-gradient(to right,white,wheat);
            border-bottom-left-radius: 45%;
            border-bottom-right-radius: 45%;
        }
        .top{
            position: absolute;
            top: -30px;
            left: 0;
            width: 100%;
            height: 60px;
            background: linear-gradient(to right,white,wheat);
            border-radius: 50%;
        }
        .circle{
            position: absolute;
            top: 5px;
            left: 10px;
            width: calc(100% - 20px);
            height: 50px;
            background: linear-gradient(to left,white,wheat);
            border-radius: 50%;
            box-sizing: border-box;
            overflow: hidden;
        }
        .tee{
            position: absolute;
            top: 20px;
            left: 0;
            width:100%;
            height: 100%;
            background: linear-gradient(rgb(226, 161, 91),rgb(244, 130, 8));
            border-radius: 50%;
            box-sizing: border-box;
        }
        .handle{
            position: absolute;
            right: -70px;
            top: 40px;
            width: 160px;
            height: 180px;
            border: 25px solid wheat;
            border-left: 25px solid transparent;
            border-bottom: 25px solid transparent;
            border-radius: 50%;
            transform: rotate(42deg);
            }
        .plate{
            position: absolute;
            bottom: -50px;
            left: 50%;
            transform: translateX(-50%);
            width: 500px;
            height: 200px;
            background: linear-gradient(to right, white,wheat);
            border-radius: 50%;
            box-shadow: 0 35px 35px rgba(0,0,0,0.4);
            }  
            .plate::before{
                content: '';
                position: absolute;
                top: 10px;
                left: 10px;
                right: 10px;
                bottom: 10px;
                border-radius: 50%;
                background: linear-gradient(to right, white, wheat);
             }  
            .plate::after{
                content: '';
                position: absolute;
                top: 30px;
                left: 30px;
                right: 30px;
                bottom: 30px;
                border-radius: 50%;
                background: radial-gradient(rgba(0,0,0,0.4) 25%, transparent, transparent);
            } 
            .vapore{
                position: relative;
                display: flex;
                z-index: 1;
                padding: 0 20px;
            }
            .vapore span{
                position: relative;
                bottom: 50px;
                display: block;
                margin: 0 2px 50px;
                min-width: 8px;
                height: 120px;
                background: white;
                border-radius: 50%;
                animation: animate 5s linear infinite;
                opacity: 0;
                filter: blur(8px);
                animation-delay: calc(var(--i)* -0.5s);
            }
            @keyframes animate{
                0%{
                    transform: translateY(0) scaleX(1);
                    opacity: 0;
                }
                15%{
                    opacity: 1;
                }
                50%{
                    transform: translateY(-150px) scaleX(5);
                }
                95%{
                    opacity: 0;
                }
                100%{
                    transform: translateY(-300px) scaleX(10);
                }
            }
    </style>
</head>
<body>
    <div class="container">
        <div class="plate"></div>
        <div class="cup">
          <div class="top">
            <div class="vapore">
                <span style="--i:1;"></span>
                <span style="--i:19;"></span>
                <span style="--i:4;"></span>
                <span style="--i:5;"></span>
                <span style="--i:12;"></span>
                <span style="--i:9;"></span>
                <span style="--i:7;"></span>
                <span style="--i:20;"></span>
                <span style="--i:14;"></span>
                <span style="--i:8;"></span>
                <span style="--i:10;"></span>
                <span style="--i:2;"></span>
                <span style="--i:3;"></span>
                <span style="--i:13;"></span>
                <span style="--i:16;"></span>
                <span style="--i:18;"></span>
                <span style="--i:6;"></span>
                <span style="--i:11;"></span>
                <span style="--i:15;"></span>
                <span style="--i:17;"></span>
            </div>
            <div class="circle">
               <div class="tee"></div>
            </div>
          </div>
          <div class="handle"></div>
        </div>
    </div>
</body>
</html>

Result:-

HTML and CSS Project Create Tea Cup

Is tutorial ke liye bas itna hi. Yadi apko yah code banate time koi problem aati hai to ap muje instagram @nitinkumarmahuley msg kar ke baat kar sakte hai. Iske alawa yadi apke pas koi queries, suggestions ya feedback hai to ap unpar niche comment kar sakte hai.
Happy coding!

एक टिप्पणी भेजें

0 टिप्पणियाँ
* Please Don't Spam Here. All the Comments are Reviewed by Admin.