Sinfonía del estado estacionario

1,402 byby.createsite

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

30 January 2026

Animación de partículas de lienzo con interacción del ratón

12 March 2026

Código HTML5 del juego de rompecabezas Block Blast

5 March 2025

Sitio web del planificador de citas

HTML

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
  }
  .animation-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50%;
    overflow: hidden;
    background-color: #000;
  }

.box {
    width: 100px;
    height: 100px;
    background-color: #F06292;
    border-radius: 10px;
    position: relative; /* Para posicionar o pseudoelemento */
    margin: 20px;
    animation: hover-glow 0.5s linear infinite;
  }

.box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transform: scale(0.9); /* Redimensiona o pseudoelemento */
  }
  /*  */

@keyframes hover-glow {
    0% { 
      transform: translateY(0); 
      border-radius: 10px; 
    }
    100% { 
      transform: translateY(-10px); 
      border-radius: 0;   
    }
  }  
  
 /* Configurações de hover */ 
  .box:hover {
    background-color: #D81B60; /* Muda a cor no hover */ 
    transform: translateY(-2px); /* Tranform posição*/
    box-shadow: 0 4px 8px rgba(248, 98, 186, 0.8); /* Adiciona sombra */
  }