Animation

33 kevekıbhack

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

10 August 2024

Champ de saisie simple

12 December 2025

Démo de jeu de combat Ragdoll (HTML, CSS, JS)

18 October 2024

Modèle de site Web de portefeuille HTML CSS

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>

Recommandé

Champ de saisie simple

Démo de jeu de combat Ragdoll (HTML, CSS, JS)

Modèle de site Web de portefeuille HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS