Protocolo de parálisis de desplazamiento

902 byby.createsite

Abrir en el editor Publica tu código

Protocolo de parálisis de desplazamiento

Recomendado

10 January 2026

Reloj de React hecho de componentes de relojes

31 October 2023

Juego de Serpiente Simple

10 September 2024

tarjeta de identidad en angola

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;
  }
  .codigo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #272822;
    color: #F8F8F2;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 18px;
    padding: 20px;
    border-radius: 8px;
    white-space: pre-line;
    text-align: left;
    line-height: 1.6;
    max-height: 50%;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  .selector { color: #F92672; }
  .property { color: #66D9EF; }
  .value-number { color: #AE81FF; }
  .value-string { color: #E6DB74; }
  .value-color { color: #A6E22E; }
  .brace { color: #F8F8F2; }
  .comment { color: #75715E; }
  .function { color: #A6E22E; }
  .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;
  }
  .scroll-lane {
    width: 100px;
    height: 100vh;
    background-color: #222;
    position: relative;
    animation: scroll-lane 5s linear infinite;
  }
  @keyframes scroll-lane {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100vh); }
  }
  .scrolling-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transform: translateY(0);
    animation: scroll-content 5s linear infinite, fade-in-out 1s linear infinite;
  }
  .scrolling-content::-webkit-scrollbar {
    height: 0; /* HIDE scrollbar */
    width: 0;
  }
  .content-unit {
    height: 100px;
    background-color: #333;
    margin-bottom: 10px;
    text-align: center;
    line-height: 100px;
    color: #eee;
    /* Crie uma animação que dê a ilusão de conteúdo carregando */
    animation: scroll-content-ripple 1.5s ease-in-out infinite;
  }
  @keyframes scroll-content-ripple {
    0%   { transform: scale(1); opacity: 1; }
    33%  { transform: scale(1.1); opacity: 0.8; }
    66%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.1); opacity: 0.8; }
  }

/* Adicione uma animação de fade-in/fade-out para cada unidade de conteúdo */
  @keyframes fade-in-out {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }