Sinfonía del estado estacionario

95 ByBy.inc

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

29 June 2025

Fragmento de código del menú desplegable HTML

28 June 2025

Barra de navegación del sitio web HTML y sección principal

22 June 2025

Plantilla HTML del panel de administración

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 */
  }

Recomendado

Fragmento de código del menú desplegable HTML

Barra de navegación del sitio web HTML y sección principal

Plantilla HTML del panel de administración

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS