Animación

31 kevekıbhack

Abrir en el editor Video Publica tu código

Recomendado

18 December 2025

Cargador de juegos Unity WebGL Slope Plus

29 August 2024

Interfaz de usuario de la calculadora -Neumorfismo -Drak

1 June 2025

AQUÍ ESTÁ LISA

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>

Recomendado

Cargador de juegos Unity WebGL Slope Plus

Interfaz de usuario de la calculadora -Neumorfismo -Drak

AQUÍ ESTÁ LISA

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS