Animation

562 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 January 2026

Le football de poupée de chiffon

23 April 2025

Générateur de mots de passe par SENAPI

14 March 2026

Car King Arena

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>

CSS