सीएसएस एनिमेटेड पंखा: चालू/बंद करें, गति नियंत्रित करें

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

2 August 2025

सीएसएस एनिमेटेड लॉगिन फॉर्म डिजाइन

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Working Fan CSS</title>
    <style>
        *,
        *:before,
        *:after{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        body {
            background: linear-gradient(135deg, #1a2980, #26d0ce);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
        }
        
        .container {
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }
        
        h1 {
            color: white;
            margin-bottom: 10px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.3);
            font-size: 2.5rem;
        }
        
        .subtitle {
            color: #fdbf00;
            margin-bottom: 40px;
            font-size: 1.2rem;
            font-weight: 500;
        }
        
        .fan-container {
            position: relative;
            display: inline-block;
            margin-bottom: 40px;
        }
        
        .fan{
            height: 350px;
            width: 350px;
            position: relative;
            filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3));
        }
        
        label{
            display: block;
            height: 20px;
            width: 20px;
            background-color: #222;
            position: absolute;
            margin: 120px auto 0 auto;
            left: 0;
            right: 0;
            border-radius: 50%;
            animation: spin 1s infinite linear;
            animation-play-state: paused;
            cursor: pointer;
            z-index: 5;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            transition: transform 0.3s;
        }
        
        label:hover {
            transform: scale(1.1);
        }
        
        @keyframes spin{
            100%{
                transform: rotate(360deg);
            }    
        }
        
        label:after{
            content: "";
            position: absolute;
            height: 70px;
            width: 70px;
            background-color: #005fe4;
            border: 10px solid #00317e;
            border-radius: 50%;
            left: -25px;
            bottom: -25px; 
            box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
        }
        
        label span{
            display: block;
            height: 120px;
            width: 70px;
            background: linear-gradient(to bottom, #fdbf00, #e6ac00);
            border-radius: 55% 45% 100% 0% / 39% 28% 72% 61%;
            position: absolute;
            z-index: -1;
            box-shadow: inset 0 -5px 10px rgba(0,0,0,0.2);
        }
        
        span:nth-child(1){
            bottom: 10px;
            left: 10px;
        }
        
        span:nth-child(2){
            transform: rotate(-120deg);
            left: -95px;
            top: -50px;
        }
        
        span:nth-child(3){
            transform: rotate(-240deg);
            right: -60px;
            top: 10px;
        }
        
        .base{
            height: 160px;
            width: 20px;
            background: linear-gradient(to bottom, #00317e, #001f4d);
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 140px;
            z-index: -1;
            border-radius: 10px 10px 0 0;
        }
        
        .base:after{
            content: "";
            position: absolute;
            height: 35px;
            width: 150px;
            background: linear-gradient(to bottom, #fdbf00, #e6ac00);
            left: -65px;
            top: 160px;
            border-radius: 20px 20px 0 0;
            box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        }
        
        input[type="checkbox"]{
            position: absolute;
            -webkit-appearance: none;
            appearance: none;
            height: 12px;
            width: 20px;
            background-color: #c30010;
            position: absolute;
            bottom: 50px;
            left: 130px;
            outline: none;
            cursor: pointer;
            border-radius: 5px 5px 0 0;
            box-shadow: 0 3px 5px rgba(0,0,0,0.3);
            transition: all 0.3s;
            z-index: 10;
        }
        
        input[type="checkbox"]:checked{
            height: 8px;
            background-color: #00a308;
        }
        
        input[type="checkbox"]:checked + label{
            animation-play-state: running;
        }
        
        .controls {
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            margin-top: 30px;
            display: inline-block;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .speed-control {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
            color: white;
        }
        
        .speed-btn {
            background-color: #005fe4;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
            box-shadow: 0 3px 5px rgba(0,0,0,0.2);
        }
        
        .speed-btn:hover {
            background-color: #00317e;
            transform: translateY(-2px);
        }
        
        .speed-display {
            font-size: 1.1rem;
            min-width: 100px;
            font-weight: 600;
            color: #fdbf00;
        }
        
        .instructions {
            color: white;
            margin-top: 20px;
            line-height: 1.6;
            background-color: rgba(0, 0, 0, 0.2);
            padding: 15px;
            border-radius: 10px;
            max-width: 500px;
            margin: 20px auto 0;
        }
        
        .instructions h3 {
            color: #fdbf00;
            margin-bottom: 10px;
        }
        
        .instructions ul {
            text-align: left;
            margin-left: 20px;
        }
        
        .instructions li {
            margin-bottom: 8px;
        }
        
        @media (max-width: 500px) {
            .fan{
                height: 280px;
                width: 280px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .speed-control {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS Fan Animation</h1>
        <div class="subtitle">Click the fan center to toggle on/off</div>
        
        <div class="fan-container">
            <div class="fan">
                <input type="checkbox" id="btn">
                <label for="btn">
                    <span></span>
                    <span></span>
                    <span></span>
                </label>
                <div class="base"></div>
            </div>
        </div>
        
        <div class="controls">
            <div class="speed-control">
                <button class="speed-btn" id="slow">Slow Speed</button>
                <div class="speed-display" id="speedDisplay">Speed: Normal</div>
                <button class="speed-btn" id="fast">Fast Speed</button>
            </div>
        </div>
        
        <div class="instructions">
            <h3>How to Use:</h3>
            <ul>
                <li><strong>Click the center of the fan</strong> to turn it ON/OFF</li>
                <li>Use the buttons to control the fan speed</li>
                <li>The red/green switch at the bottom also controls power</li>
                <li>Try hovering over the fan center for a subtle effect</li>
            </ul>
        </div>
    </div>

सीएसएस एनिमेटेड पंखा: चालू/बंद करें, गति नियंत्रित करें

अनुशंसित

एनिमेटेड HTML रजिस्टर फ़ॉर्म

सिम्पल एचटीएमएल सीएसएस बटन

सीएसएस एनिमेटेड लॉगिन फॉर्म डिजाइन

HTML

CSS

JS

अनुशंसित

एनिमेटेड HTML रजिस्टर फ़ॉर्म

सिम्पल एचटीएमएल सीएसएस बटन

सीएसएस एनिमेटेड लॉगिन फॉर्म डिजाइन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS