ciudad de fallas

651 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

25 February 2025

Un código de securearray494

10 February 2025

Formulario de inicio de sesión CSS

29 July 2024

Animación de introducción de Netflix CSS puro

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: 29px;
  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);
}
.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; 
}

/* CSS Snippet */
.codigo {
  background-color: #000;
} .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 {
  /* Main Effect */
  width: 300px; height: 300px;
  background-color: rgba(255, 255, 255, 0.05);
  perspective: 1000px;
}

.block {
  position: absolute;
  width: 50px; 
  height: 50px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
    opacity: 0;
    animation: blockAnimation 3s infinite linear;
}

.block:nth-child(1) { left: 50px; top: 50px; transform: rotateY(0deg); animation-delay: 0.2s;background-color: rgba(255, 255, 255, 0.8);  }
.block:nth-child(2) { left: 150px; top: 50px; transform: rotateY(45deg); animation-delay: 0.3s;  }
.block:nth-child(3) { left: 50px; top: 150px; transform: rotateY(90deg); animation-delay: 0.4s; background-color: rgba(255, 255, 255, 0.9);  }
.block:nth-child(4) { left: 250px; top: 50px; transform: rotateY(135deg); animation-delay: 0.5s;  }
.block:nth-child(5) { left: 50px; top: 250px; transform: rotateY(180deg); animation-delay: 0.6s; background-color: rgba(255, 255, 255, 0.7); }
.block:nth-child(6) { left: 150px; top: 250px; transform: rotateY(225deg); animation-delay: 0.7s;  background-color: rgba(255, 255, 255, 0.6);  }
.block:nth-child(7) { 
  left: 250px; 
  top: 150px; 
  transform: rotateY(270deg); 
  animation-delay: 0.8s; 
  background-color: rgba(255, 255, 255, 0.5); 
}

@keyframes blockAnimation {
   0% { transform: translateZ(0) rotateY(0deg); opacity: 0; } 
   100% { transform: translateZ(100px) rotateY(360deg); opacity: 1; }
}

Recomendado

Un código de securearray494

Formulario de inicio de sesión CSS

Animación de introducción de Netflix CSS puro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS