Un código de Metehan

Abrir en el editor Publica tu código

Recomendado

2 September 2024

Efecto de flotar al beber refresco

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeatherSphere</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#3b82f6',
                            dark: '#1e40af'
                        },
                        secondary: {
                            light: '#f59e0b',
                            dark: '#b45309'
                        }
                    },
                    animation: {
                        'spin-slow': 'spin 3s linear infinite',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 6s ease-in-out infinite',
                        'bounce-slow': 'bounce 2s infinite'
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        @keyframes sunrays {
            0% { transform: rotate(0deg); opacity: 0.8; }
            50% { transform: rotate(180deg); opacity: 1; }
            100% { transform: rotate(360deg); opacity: 0.8; }
        }
        
        @keyframes raindrop {
            0% { transform: translateY(-10px); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(30px); opacity: 0; }
        }
        
        @keyframes cloudMove {
            0% { transform: translateX(0); }
            50% { transform: translateX(10px); }
            100% { transform: translateX(0); }
        }
        
        @keyframes lightning {
            0%, 100% { opacity: 0; }
            5%, 15%, 25%, 35%, 45% { opacity: 1; }
            10%, 20%, 30%, 40% { opacity: 0; }
        }
        
        .sun-rays {
            animation: sunrays 8s linear infinite;
        }
        
        .raindrop {
            animation: raindrop 1s linear infinite;
            animation-delay: calc(var(--delay) * 0.2s);
        }
        
        .cloud {
            animation: cloudMove 6s ease-in-out infinite;
        }
        
        .lightning {
            animation: lightning 4s linear infinite;
        }
        
        .neumorphism-light {
            box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
        }
        
        .neumorphism-dark {
            box-shadow: 8px 8px 16px #0f172a, -8px -8px 16px #1e293b;
        }
        
        .splash-screen {
            animation: fadeOut 1.5s ease-out 2s forwards;
        }
        
        @keyframes fadeOut {
            to {
                opacity: 0;
                visibility: hidden;
            }
        }
        
        .sky-gradient-day {
            background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
        }
        
        .sky-gradient-night {
            background: linear-gradient(to bottom, #0F2027, #203A43, #2C5364);
        }
        
        .card-glass {
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .card-glass-dark {
            backdrop-filter: blur(10px);
            background-color: rgba(15, 23, 42, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-slate-900 transition-colors duration-300 min-h-screen">
    
    <div id="splash" class="splash-screen fixed inset-0 z-50 flex items-center justify-center sky-gradient-day dark:sky-gradient-night transition-colors duration-300">
        <div class="text-center">
            <div class="relative w-32 h-32 mx-auto mb-6">
                
                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="w-24 h-24 rounded-full bg-yellow-400 dark:bg-yellow-300 shadow-lg flex items-center justify-center">
                        <div class="absolute w-full h-full rounded-full border-4 border-yellow-300 dark:border-yellow-200 opacity-30 sun-rays"></div>
                    </div>
                    <div class="cloud absolute -top-2 -right-4 w-16 h-8 bg-white dark:bg-gray-200 rounded-full"></div>
                    <div class="cloud absolute top-4 -left-4 w-12 h-6 bg-white dark:bg-gray-200 rounded-full"></div>
                </div>
            </div>
            <h1 class="text-3xl font-bold text-slate-800 dark:text-white">WeatherSphere</h1>
            <p class="text-slate-600 dark:text-slate-300 mt-2">Loading weather data...</p>
        </div>
    </div>

<div class="container mx-auto px-4 py-6 max-w-md">
        
        <header class="flex justify-between items-center mb-6">
            <button id="theme-toggle" class="p-2 rounded-full bg-white dark:bg-slate-800 shadow-md neumorphism-light dark:neumorphism-dark">
                <i class="fas fa-moon text-gray-700 dark:text-yellow-300"></i>
            </button>
            <div class="flex items-center space-x-2">
                <button class="p-2 rounded-full bg-white dark:bg-slate-800 shadow-md neumorphism-light dark:neumorphism-dark">
                    <i class="fas fa-map-marker-alt text-blue-500"></i>
                </button>
                <button class="p-2 rounded-full bg-white dark:bg-slate-800 shadow-md neumorphism-light dark:neumorphism-dark">
                    <i class="fas fa-bell text-blue-500"></i>
                </button>
            </div>
        </header>

<div class="card-glass dark:card-glass-dark rounded-3xl p-6 mb-6 relative overflow-hidden">
            <div class="absolute -top-20 -right-20 w-40 h-40 bg-blue-200 dark:bg-blue-900 rounded-full opacity-20"></div>
            <div class="absolute -bottom-20 -left-20 w-40 h-40 bg-purple-200 dark:bg-purple-900 rounded-full opacity-20"></div>
            
            <div class="relative z-10">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <h2 class="text-2xl font-bold text-slate-800 dark:text-white">San Francisco</h2>
                        <p class="text-slate-600 dark:text-slate-300">Partly Cloudy</p>
                    </div>
                    <div class="text-right">
                        <p class="text-sm text-slate-600 dark:text-slate-300">Updated: 10:30 AM</p>
                        <button class="mt-1 text-blue-500 dark:text-blue-400 text-sm flex items-center">
                            <i class="fas fa-sync-alt mr-1"></i> Refresh
                        </button>
                    </div>
                </div>

<div class="mb-6">
            <h3 class="text-lg font-semibold text-slate-800 dark:text-white mb-3">Hourly Forecast</h3>
            <div class="flex overflow-x-auto pb-2 space-x-3">
                
                <div class="card-glass dark:card-glass-dark flex-shrink-0 rounded-2xl p-4 text-center w-20">
                    <p class="text-sm text-slate-700 dark:text-slate-300">Now</p>
                    <div class="my-2 relative w-8 h-8 mx-auto">
                        <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                    </div>
                    <p class="font-medium text-slate-800 dark:text-white">72°</p>
                </div>
                
                <div class="card-glass dark:card-glass-dark flex-shrink-0 rounded-2xl p-4 text-center w-20">
                    <p class="text-sm text-slate-700 dark:text-slate-300">11 AM</p>
                    <div class="my-2 relative w-8 h-8 mx-auto">
                        <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                    </div>
                    <p class="font-medium text-slate-800 dark:text-white">75°</p>
                </div>
                
                <div class="card-glass dark:card-glass-dark flex-shrink-0 rounded-2xl p-4 text-center w-20">
                    <p class="text-sm text-slate-700 dark:text-slate-300">12 PM</p>
                    <div class="my-2 relative w-8 h-8 mx-auto">
                        <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                        <div class="cloud absolute -top-1 -right-2 w-4 h-2 bg-white dark:bg-gray-200 rounded-full"></div>
                    </div>
                    <p class="font-medium text-slate-800 dark:text-white">78°</p>
                </div>
                
                <div class="card-glass dark:card-glass-dark flex-shrink-0 rounded-2xl p-4 text-center w-20">
                    <p class="text-sm text-slate-700 dark:text-slate-300">1 PM</p>
                    <div class="my-2 relative w-8 h-8 mx-auto">
                        <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                        <div class="cloud absolute -top-1 -right-2 w-4 h-2 bg-white dark:bg-gray-200 rounded-full"></div>
                    </div>
                    <p class="font-medium text-slate-800 dark:text-white">80°</p>
                </div>
                
                <div class="card-glass dark:card-glass-dark flex-shrink-0 rounded-2xl p-4 text-center w-20">
                    <p class="text-sm text-slate-700 dark:text-slate-300">2 PM</p>
                    <div class="my-2 relative w-8 h-8 mx-auto">
                        <div class="w-4 h-4 bg-white dark:bg-gray-200 rounded-full mx-auto"></div>
                        <div class="cloud absolute top-0 -right-1 w-6 h-3 bg-white dark:bg-gray-200 rounded-full"></div>
                    </div>
                    <p class="font-medium text-slate-800 dark:text-white">79°</p>
                </div>
                
                <div class="card-glass dark:card-glass-dark flex-shrink-0 rounded-2xl p-4 text-center w-20">
                    <p class="text-sm text-slate-700 dark:text-slate-300">3 PM</p>
                    <div class="my-2 relative w-8 h-8 mx-auto">
                        <div class="w-6 h-6 bg-white dark:bg-gray-200 rounded-full mx-auto"></div>
                    </div>
                    <p class="font-medium text-slate-800 dark:text-white">77°</p>
                </div>
            </div>
        </div>

<div>
            <h3 class="text-lg font-semibold text-slate-800 dark:text-white mb-3">7-Day Forecast</h3>
            <div class="space-y-3">
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Today</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                            <div class="cloud absolute -top-1 -right-2 w-4 h-2 bg-white dark:bg-gray-200 rounded-full"></div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">72°</span>
                        <span class="text-slate-600 dark:text-slate-400">64°</span>
                    </div>
                </div>
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Tue</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">76°</span>
                        <span class="text-slate-600 dark:text-slate-400">65°</span>
                    </div>
                </div>
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Wed</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 bg-white dark:bg-gray-200 rounded-full mx-auto"></div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">74°</span>
                        <span class="text-slate-600 dark:text-slate-400">66°</span>
                    </div>
                </div>
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Thu</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 bg-white dark:bg-gray-200 rounded-full mx-auto"></div>
                            
                            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 flex space-x-1">
                                <div class="w-1 h-2 bg-blue-400 rounded-full raindrop" style="--delay: 1"></div>
                                <div class="w-1 h-2 bg-blue-400 rounded-full raindrop" style="--delay: 2"></div>
                                <div class="w-1 h-2 bg-blue-400 rounded-full raindrop" style="--delay: 3"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">70°</span>
                        <span class="text-slate-600 dark:text-slate-400">62°</span>
                    </div>
                </div>
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Fri</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 bg-gray-400 dark:bg-gray-500 rounded-full mx-auto"></div>
                            
                            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 lightning">
                                <div class="w-2 h-3 bg-yellow-300 transform rotate-45"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">68°</span>
                        <span class="text-slate-600 dark:text-slate-400">60°</span>
                    </div>
                </div>
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Sat</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 bg-white dark:bg-gray-200 rounded-full mx-auto"></div>
                            
                            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 flex space-x-1">
                                <div class="w-1 h-1 bg-blue-200 rounded-full"></div>
                                <div class="w-1 h-1 bg-blue-200 rounded-full"></div>
                                <div class="w-1 h-1 bg-blue-200 rounded-full"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">65°</span>
                        <span class="text-slate-600 dark:text-slate-400">58°</span>
                    </div>
                </div>
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Sun</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                            <div class="cloud absolute -top-1 -right-2 w-4 h-2 bg-white dark:bg-gray-200 rounded-full"></div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">71°</span>
                        <span class="text-slate-600 dark:text-slate-400">63°</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-800 shadow-lg">
        <div class="container mx-auto px-4 py-3 max-w-md flex justify-around">
            <button class="p-2 text-blue-500 dark:text-blue-400">
                <i class="fas fa-home text-xl"></i>
            </button>
            <button class="p-2 text-gray-500 dark:text-gray-400">
                <i class="fas fa-map text-xl"></i>
            </button>
            <button class="p-2 text-gray-500 dark:text-gray-400">
                <i class="fas fa-chart-line text-xl"></i>
            </button>
            <button class="p-2 text-gray-500 dark:text-gray-400">
                <i class="fas fa-cog text-xl"></i>
            </button>
        </div>
    </div>

Un código de Metehan

Recomendado

Burbujas de corazón

Un código de smartfunction186

Efecto de flotar al beber refresco

HTML

CSS

JS

Recomendado

Burbujas de corazón

Un código de smartfunction186

Efecto de flotar al beber refresco

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS