Un código de adwq

Abrir en el editor Publica tu código

Recomendado

12 December 2024

Control deslizante de imágenes para Blogspot CSS3

30 March 2025

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>¿love?</title>
</head>
<body>                              
    <div class="container">

<h1 id="question">¿sabías que te amo?</h1>
        <div id="messageContainer" style="display: none;"></div>

</div>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background-color: purple;
}

.container {
  text-align: center;
}

#gifContainerImg {
  width: 60%;
  height: 60%;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin: 10px;
  cursor: pointer;
}

#siBtn {
  padding: 10px 20px;
  font-size: 16px;
  margin: 10px;
  cursor: pointer;
  background-color: #009705; /* verde */
  color: white;
  border: 2px solid #ffc0cb; /* Bordes rosa */
  border-radius: 10px; /* Esquinas redondeadas */
}

#noBtn {
  padding: 10px 20px;
  font-size: 16px;
  margin: 10px;
  cursor: pointer;
  background-color: #ff5733; /* Rojo */
  color: white;
  border: 2px solid #ffc0cb; /* Bordes rosa */
  border-radius: 10px; /* Esquinas redondeadas */
}

#noBtn span {
  font-size: 18px;
  color: #fcf4f4; /* Cambia el color del texto según tus preferencias */
}

#siBtn:hover {
  background-color: #006e00; /* Cambia a otro color en hover */
}

#noBtn:hover {
  background-color: #641e0d; /* Cambia a otro color en hover */
}

.bg-green {
  background-color: #ffffff; /* Nuevo color de fondo verde */
}

#messageContainer {
  font-size: 30px;
  color: #ff0000; /* Color rojo */
  font-family: "Arial", sans-serif; /* Fuente personalizada */
  text-shadow: 2px 2px 4px #000; /* Borde simulado */
  animation: pulse 0.5s infinite alternate; /* Animación de palpitación */
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.3); /* Zoom más grande */
  }
}

JS

let noButtonClickCount = 0; // Contador para el botón "No"
let noButtonState = 0; // Estado actual del botón "No"

// Mostrar el gif inicial
document.getElementById('gifContainer').style.display = 'block';

document.getElementById('siBtn').addEventListener('click', function() {
    // Ocultar el gif triste y mostrar el gif feliz
    document.getElementById('sadGifContainer').style.display = 'none';
    document.getElementById('sadGifContainer1').style.display = 'none';
    document.getElementById('sadGifContainer2').style.display = 'none';
    document.getElementById('gifContainer').style.display = 'none';
    document.getElementById('happyGifContainer').style.display = 'block';

// Ocultar los botones "Pregunta Sí" y "No "
    document.getElementById('question').style.display = 'none';
    document.getElementById('siBtn').style.display = 'none';
    document.body.classList.add('bg-green');
    document.getElementById('noBtn').style.display = 'none';

// Mostrar el mensaje específico
    document.getElementById('messageContainer').style.display = 'block';
    document.getElementById('messageContainer').innerHTML = '¡ahhhhhh si sabias, te amooooo';

// Mostrar otro gif después de 3 segundos
    setTimeout(function() {
        document.getElementById('happyGifContainer').style.display = 'none';
        document.getElementById('happyGifContainer2').style.display = 'block';
    }, 1000);

setTimeout(function() {
        document.getElementById('happyGifContainer2').style.display = 'none';
        document.getElementById('happyGifContainer3').style.display = 'block';
    }, 2000);

setTimeout(function() {
        document.getElementById('happyGifContainer3').style.display = 'none';
        document.getElementById('happyGifContainer4').style.display = 'block';
    }, 3000);
});

document.getElementById('noBtn').addEventListener('click', function() {
    switch (noButtonState) {
        case 0:
            // Primera vez haciendo clic en "No"
            document.getElementById('happyGifContainer').style.display = 'none';
            document.getElementById('gifContainer').style.display = 'none';
            document.getElementById('sadGifContainer').style.display = 'block';
            document.getElementById('noBtn').innerHTML = '¡no sabías?';
            noButtonClickCount++;
            noButtonState++;
            break;

case 1:
            document.getElementById('noBtn').innerHTML = '¡¿de verdad no sabías?!';
            document.getElementById('sadGifContainer').style.display = 'none';
            document.getElementById('sadGifContainer2').style.display = 'block';
            noButtonState++;
            break;

case 2:
            document.getElementById('noBtn').innerHTML = 'Estás segurita que no sabías, ¿eh?';
            document.getElementById('sadGifContainer').style.display = 'none';
            document.getElementById('sadGifContainer1').style.display = 'block';
            noButtonState++;
            break;

case 3:
            document.getElementById('noBtn').innerHTML = '¿enserio no sabías?';
            noButtonState++;
            break;

case 4:
            document.getElementById('noBtn').innerHTML = 'deberías saber';
            noButtonState++;
            break;

default:
            document.getElementById('noBtn').innerHTML = 'yo creo que si sabías';
            noButtonState = 0;
            break;
    }
});

Un código de adwq

Recomendado

Control deslizante de imágenes para Blogspot CSS3

Un código de ytr3d3

Arte de texto

HTML

CSS

JS

Recomendado

Control deslizante de imágenes para Blogspot CSS3

Un código de ytr3d3

Arte de texto

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS