Un código de diomankeita001

1,275 diomankeita001

Abrir en el editor Publica tu código

Recomendado

16 January 2025

Ejemplo de página de destino de sitio web de películas

19 September 2023

Animación de texto al desplazarse

25 September 2025

Fragmento de animación de carga de CSS

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Cart Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: 'Press Start 2P', cursive; /* A retro-style font if available */
            background-color: #f0f0f0;
        }

/* Fallback for 'Press Start 2P' or if you want to include it:
           @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        */

#game-container {
            width: 100%;
            height: 100vh; /* Full viewport height */
            position: relative;
            background-color: #87CEEB; /* Sky blue background */
            overflow: hidden;
            border-bottom: 20px solid #228B22; /* Ground */
            box-sizing: border-box; /* Include padding/border in height */
            display: flex; /* For centering game over text */
            justify-content: center;
            align-items: center;
        }

#score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 24px;
            color: #333;
            z-index: 10;
            background-color: rgba(255, 255, 255, 0.7);
            padding: 5px 10px;
            border-radius: 5px;
            min-width: 120px; /* Ensure space for score */
            text-align: center;
        }

#cart {
            width: 100px;
            height: 60px;
            background-color: #A0522D; /* Brown cart */
            position: absolute;
            bottom: 20px; /* Above the ground border */
            left: calc(50% - 50px); /* Centered initially */
            border-radius: 10px 10px 0 0;
            z-index: 5;
            box-shadow: 0 5px 10px rgba(0,0,0,0.3);
            transition: left 0.05s linear; /* Smooth cart movement */
        }

#cart::before, #cart::after {
            content: '';
            position: absolute;
            bottom: -20px; /* Wheels below the cart */
            width: 30px;
            height: 30px;
            background-color: #333; /* Dark wheels */
            border-radius: 50%;
            z-index: 4;
            border: 2px solid #111;
        }

#cart::before {
            left: 5px;
        }

#cart::after {
            right: 5px;
        }

.item {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #FFD700; /* Gold item */
            border-radius: 50%;
            border: 2px solid #DAA520;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 3;
            font-size: 20px;
            text-align: center;
            line-height: 40px;
            color: white;
            font-weight: bold;
            /* For visual distinction, could use different colors/shapes */
        }

#game-over {
            position: absolute;
            font-size: 48px;
            color: #FF0000;
            text-shadow: 3px 3px 0 #000;
            z-index: 20;
            display: none; /* Hidden by default */
            text-align: center;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 10px;
            border: 5px solid #FF0000;
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
        }

#game-over button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 24px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="score">Score: 0</div>
        <div id="cart"></div>
        <div id="game-over">
            GAME OVER!
            <br>
            <span id="final-score">Score: 0</span>
            <br>
            <button onclick="restartGame()">Play Again</button>
        </div>
    </div>

let cartX;
        const cartSpeed = 10;
        let score = 0;
        const items = [];
        let itemFallSpeed = 3; // pixels per frame, increases with score
        let itemSpawnInterval = 1500; // ms, decreases with score
        let lastItemSpawnTime = 0;
        let gameActive = true;
        let animationFrameId;

// Game configuration
        const ITEM_WIDTH = 40;
        const ITEM_HEIGHT = 40;
        const CART_WIDTH = 100;
        const CART_HEIGHT = 60;
        const GROUND_HEIGHT = 20; // Matches border-bottom height

function initializeGame() {
            gameActive = true;
            score = 0;
            itemFallSpeed = 3;
            itemSpawnInterval = 1500;
            lastItemSpawnTime = 0;
            scoreDisplay.textContent = `Score: ${score}`;
            gameOverScreen.style.display = 'none';

// Clear existing items
            items.forEach(item => item.element.remove());
            items.length = 0; // Clear the array

// Set initial cart position
            cartX = (gameContainer.offsetWidth / 2) - (CART_WIDTH / 2);
            cart.style.left = cartX + 'px';

if (animationFrameId) {
                cancelAnimationFrame(animationFrameId);
            }
            animationFrameId = requestAnimationFrame(gameLoop);
        }

function updateCartPosition() {
            cart.style.left = cartX + 'px';
        }

function createItem() {
            const item = document.createElement('div');
            item.classList.add('item');
            item.style.left = Math.random() * (gameContainer.offsetWidth - ITEM_WIDTH) + 'px';
            item.style.top = '0px';
            gameContainer.appendChild(item);
            items.push({ element: item, y: 0, x: parseFloat(item.style.left) });
        }

function gameLoop(currentTime) {
            if (!gameActive) return;

// Spawn new items
            if (currentTime - lastItemSpawnTime > itemSpawnInterval) {
                createItem();
                lastItemSpawnTime = currentTime;
            }

// Update item positions and check for collisions
            for (let i = items.length - 1; i >= 0; i--) {
                const item = items[i];
                item.y += itemFallSpeed;
                item.element.style.top = item.y + 'px';

// Check for collision with cart
                if (
                    item.y + ITEM_HEIGHT >= gameContainer.offsetHeight - CART_HEIGHT - GROUND_HEIGHT && // Item's bottom reaches cart's top
                    item.y + ITEM_HEIGHT <= gameContainer.offsetHeight - GROUND_HEIGHT && // Item's bottom is above or at ground level
                    item.x < cartX + CART_WIDTH && // Item's left is to the left of cart's right
                    item.x + ITEM_WIDTH > cartX // Item's right is to the right of cart's left
                ) {
                    // Collision!
                    score++;
                    scoreDisplay.textContent = `Score: ${score}`;
                    item.element.remove();
                    items.splice(i, 1);

// Increase difficulty
                    if (score % 5 === 0) { // Every 5 points
                        itemFallSpeed += 0.5;
                        itemSpawnInterval = Math.max(500, itemSpawnInterval - 100); // Max 500ms interval
                    }
                } else if (item.y > gameContainer.offsetHeight - GROUND_HEIGHT) { // Item fell past the cart onto the ground
                    item.element.remove();
                    items.splice(i, 1);
                    endGame(); // Game over if an item is missed
                    return; // Stop current loop and prevent further updates
                }
            }

animationFrameId = requestAnimationFrame(gameLoop);
        }

function endGame() {
            gameActive = false;
            cancelAnimationFrame(animationFrameId);
            finalScoreDisplay.textContent = `Score: ${score}`;
            gameOverScreen.style.display = 'block';
        }

function restartGame() {
            initializeGame();
        }

// Keyboard controls
        document.addEventListener('keydown', (e) => {
            if (!gameActive) return;

if (e.key === 'ArrowLeft') {
                cartX -= cartSpeed;
            } else if (e.key === 'ArrowRight') {
                cartX += cartSpeed;
            }

// Keep cart within bounds
            if (cartX < 0) {
                cartX = 0;
            }
            if (cartX > gameContainer.offsetWidth - CART_WIDTH) {
                cartX = gameContainer.offsetWidth - CART_WIDTH;
            }
            updateCartPosition();
        });

// Adjust cart position on window resize
        window.addEventListener('resize', () => {
            if (gameActive) { // Only recenter if game is active
                cartX = (gameContainer.offsetWidth / 2) - (CART_WIDTH / 2);
                updateCartPosition();
            }
        });

// Initialize the game when the page loads
        initializeGame();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Beautiful Wishlist</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #6a0572; /* Deep Purple */
            --secondary-color: #9d0208; /* Dark Red */
            --accent-color: #f77f00; /* Orange */
            --text-color: #333;
            --light-text-color: #555;
            --background-light: #f4f7f6;
            --card-background: #ffffff;
            --shadow-light: rgba(0, 0, 0, 0.08);
            --shadow-hover: rgba(0, 0, 0, 0.15);
        }

body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--background-light);
            color: var(--text-color);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

.container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
        }

h1 {
            text-align: center;
            color: var(--primary-color);
            margin-bottom: 40px;
            font-weight: 600;
            font-size: 2.8em;
            position: relative;
            padding-bottom: 15px;
        }

h1::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: var(--accent-color);
            border-radius: 2px;
        }

.wishlist-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

.wishlist-item {
            background-color: var(--card-background);
            border-radius: 12px;
            box-shadow: 0 8px 16px var(--shadow-light);
            padding: 25px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

.wishlist-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px var(--shadow-hover);
        }

.wishlist-item img {
            max-width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

.wishlist-item h3 {
            color: var(--secondary-color);
            font-size: 1.6em;
            margin-top: 0;
            margin-bottom: 10px;
            font-weight: 600;
        }

.wishlist-item p {
            color: var(--light-text-color);
            font-size: 0.95em;
            margin-bottom: 15px;
            flex-grow: 1; /* Allows description to take available space */
        }

.wishlist-item .price {
            display: block;
            font-size: 1.4em;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

.wishlist-item .buy-button {
            display: inline-block;
            background-color: var(--accent-color);
            color: #ffffff;
            padding: 12px 25px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9em;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 8px rgba(247, 127, 0, 0.3);
        }

.wishlist-item .buy-button:hover {
            background-color: #e07000; /* Slightly darker orange */
            transform: translateY(-2px);
        }

@media (max-width: 768px) {
            h1 {
                font-size: 2.2em;
            }
            .container {
                margin: 20px auto;
                padding: 0 15px;
            }
            .wishlist-item {
                padding: 20px;
            }
        }

@media (max-width: 480px) {
            h1 {
                font-size: 1.8em;
            }
            .wishlist-grid {
                grid-template-columns: 1fr;
            }
            .wishlist-item img {
                height: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>My Beautiful Wishlist</h1>

<div class="wishlist-item">
                <img src="https://via.placeholder.com/300x180?text=Fancy+Gadget" alt="Fancy Gadget">
                <h3>Fancy Smart Gadget</h3>
                <p>A sleek, innovative gadget that promises to simplify daily tasks and bring joy with its advanced features.</p>
                <span class="price">$249.99</span>
                <a href="#" class="buy-button">Learn More</a>
            </div>

<div class="wishlist-item">
                <img src="https://via.placeholder.com/300x180?text=Cozy+Blanket" alt="Cozy Blanket">
                <h3>Ultra-Soft Cozy Blanket</h3>
                <p>Perfect for chilly evenings, this luxurious blanket offers unparalleled comfort and warmth, making any space inviting.</p>
                <span class="price">$79.50</span>
                <a href="#" class="buy-button">Find Details</a>
            </div>

<div class="wishlist-item">
                <img src="https://via.placeholder.com/300x180?text=Adventure+Book" alt="Adventure Book">
                <h3>Epic Fantasy Novel Series</h3>
                <p>Dive into a captivating world of magic, heroes, and villains with this highly acclaimed fantasy book series. A true escape!</p>
                <span class="price">$59.99</span>
                <a href="#" class="buy-button">Discover More</a>
            </div>

<div class="wishlist-item">
                <img src="https://via.placeholder.com/300x180?text=Coffee+Machine" alt="Coffee Machine">
                <h3>Premium Espresso Machine</h3>
                <p>Craft barista-quality coffee at home with this elegant and efficient espresso machine. Your mornings will thank you.</p>
                <span class="price">$399.00</span>
                <a href="#" class="buy-button">View Product</a>
            </div>

<div class="wishlist-item">
                <img src="https://via.placeholder.com/300x180?text=Plant+Set" alt="Indoor Plant Set">
                <h3>Chic Indoor Plant Set</h3>
                <p>Add a touch of greenery to your living space with these low-maintenance, air-purifying indoor plants. Includes stylish pots!</p>
                <span class="price">$85.00</span>
                <a href="#" class="buy-button">See Options</a>
            </div>

<div class="wishlist-item">
                <img src="https://via.placeholder.com/300x180?text=Wireless+Headphones" alt="Wireless Headphones">
                <h3>Noise-Cancelling Headphones</h3>
                <p>Immerse yourself in your music or podcasts with these premium wireless headphones, offering crystal-clear audio and comfort.</p>
                <span class="price">$199.99</span>
                <a href="#" class="buy-button">Browse Now</a>
            </div>

</div>
    </div>
</body>
</html>

CSS