Webleb - Extraits de Code - tempête galactique

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            }
            @keyframes scanline {
              0% { transform: translateY(-100%); }
              100% { transform: translateY(100vh); }

}

@keyframes growFast {
              0% { transform: scale(0.01); }
              90% { transform: scale(0.01); }
              100% { transform: scale(1); }
            }
            .cylinder-segment:nth-child(1) { transform: rotateY(0deg) translateZ(100px); }
            .cylinder-segment:nth-child(2) { transform: rotateY(6deg) translateZ(100px); }
            .cylinder-segment:nth-child(3) { transform: rotateY(12deg) translateZ(100px); }
            .cylinder-segment:nth-child(4) { transform: rotateY(18deg) translateZ(100px); }
            .cylinder-segment:nth-child(5) { transform: rotateY(24deg) translateZ(100px); }
            .cylinder-segment:nth-child(6) { transform: rotateY(30deg) translateZ(100px); }
            .cylinder-segment:nth-child(7) { transform: rotateY(36deg) translateZ(100px); }
            .cylinder-segment:nth-child(8) { transform: rotateY(42deg) translateZ(100px); }
            .cylinder-segment:nth-child(9) { transform: rotateY(48deg) translateZ(100px); }
            .cylinder-segment:nth-child(10) { transform: rotateY(54deg) translateZ(100px); }
            .cylinder-segment:nth-child(11) { transform: rotateY(60deg) translateZ(100px); }
            .cylinder-segment:nth-child(12) { transform: rotateY(66deg) translateZ(100px); }
            .cylinder-segment:nth-child(13) { transform: rotateY(72deg) translateZ(100px); }
            .cylinder-segment:nth-child(14) { transform: rotateY(78deg) translateZ(100px); }
            .cylinder-segment:nth-child(15) { transform: rotateY(84deg) translateZ(100px); }
            .cylinder-segment:nth-child(16) { transform: rotateY(90deg) translateZ(100px); }
            .cylinder-segment:nth-child(17) { transform: rotateY(96deg) translateZ(100px); }
            .cylinder-segment:nth-child(18) { transform: rotateY(102deg) translateZ(100px); }
            .cylinder-segment:nth-child(19) { transform: rotateY(108deg) translateZ(100px); }
            .cylinder-segment:nth-child(20) { transform: rotateY(114deg) translateZ(100px); }
            .cylinder-segment:nth-child(21) { transform: rotateY(120deg) translateZ(100px); }
            .cylinder-segment:nth-child(22) { transform: rotateY(126deg) translateZ(100px); }
            .cylinder-segment:nth-child(23) { transform: rotateY(132deg) translateZ(100px); }
            .cylinder-segment:nth-child(24) { transform: rotateY(138deg) translateZ(100px); }
            .cylinder-segment:nth-child(25) { transform: rotateY(144deg) translateZ(100px); }
            .cylinder-segment:nth-child(26) { transform: rotateY(150deg) translateZ(100px); }
            .cylinder-segment:nth-child(27) { transform: rotateY(156deg) translateZ(100px); }
            .cylinder-segment:nth-child(28) { transform: rotateY(162deg) translateZ(100px); }
            .cylinder-segment:nth-child(29) { transform: rotateY(168deg) translateZ(100px); }
            .cylinder-segment:nth-child(30) { transform: rotateY(174deg) translateZ(100px); }
            .cylinder-segment:nth-child(31) { transform: rotateY(180deg) translateZ(100px); }
            .cylinder-nano-segment:nth-child(1) { transform: rotateY(0deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(2) { transform: rotateY(6deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(3) { transform: rotateY(12deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(4) { transform: rotateY(18deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(5) { transform: rotateY(24deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(6) { transform: rotateY(30deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(7) { transform: rotateY(36deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(8) { transform: rotateY(42deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(9) { transform: rotateY(48deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(10) { transform: rotateY(54deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(11) { transform: rotateY(60deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(12) { transform: rotateY(66deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(13) { transform: rotateY(72deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(14) { transform: rotateY(78deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(15) { transform: rotateY(84deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(16) { transform: rotateY(90deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(17) { transform: rotateY(96deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(18) { transform: rotateY(102deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(19) { transform: rotateY(108deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(20) { transform: rotateY(114deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(21) { transform: rotateY(120deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(22) { transform: rotateY(126deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(23) { transform: rotateY(132deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(24) { transform: rotateY(138deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(25) { transform: rotateY(144deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(26) { transform: rotateY(150deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(27) { transform: rotateY(156deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(28) { transform: rotateY(162deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(29) { transform: rotateY(168deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(30) { transform: rotateY(174deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(31) { transform: rotateY(180deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(32) { transform: rotateY(186deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(33) { transform: rotateY(192deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(34) { transform: rotateY(198deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(35) { transform: rotateY(204deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(36) { transform: rotateY(210deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(37) { transform: rotateY(216deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(38) { transform: rotateY(222deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(39) { transform: rotateY(228deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(40) { transform: rotateY(234deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(41) { transform: rotateY(240deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(42) { transform: rotateY(246deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(43) { transform: rotateY(252deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(44) { transform: rotateY(258deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(45) { transform: rotateY(264deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(46) { transform: rotateY(270deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(47) { transform: rotateY(276deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(48) { transform: rotateY(282deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(49) { transform: rotateY(288deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(50) { transform: rotateY(294deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(51) { transform: rotateY(300deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(52) { transform: rotateY(306deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(53) { transform: rotateY(312deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(54) { transform: rotateY(318deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(55) { transform: rotateY(324deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(56) { transform: rotateY(330deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(57) { transform: rotateY(336deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(58) { transform: rotateY(342deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(59) { transform: rotateY(348deg) translateZ(60px); }
            .cylinder-nano-segment:nth-child(60) { transform: rotateY(354deg) translateZ(60px); }

/* Background color and style */
            body {
                background-repeat: no-repeat;   
                background: url('/thumb')  no-repeat;
                background-position: center center;
                background-size: cover;    
                background-attachment: fixed;          
                background-color: black; 
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100vh;
                width: 100vw; 
                overflow: hidden;
            }

/* Animation container */
            .container {
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            top:10%;
            left:10%;
            overflow: hidden;
            background: transparent;
            animation: growFast 0.1s linear forwards;
            }

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

.scanline {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(transparent, rgba(200, 100, 255, 0.3), transparent);
  animation: scanline 2.4s linear infinite;
  pointer-events: none;
}

@keyframes pulse1 {
  0% { transform: scale(1) translate(30px, 0); }
  50% { transform: scale(2) translate(50px, 0); }
  100% { transform: scale(1) translate(30px, 0); }
}

@keyframes pulse2 {
  0% { transform: scale(1) translate(-30px, 0); }
  20% { transform: scale(2) translate(-50px, 0); }
  100% { transform: scale(1) translate(-30px, 0); }
}

@keyframes pulse3 {
  0% { transform: scale(1) translate(0, 30px); }
  40% { transform: scale(2) translate(0, 50px); }
  100% { transform: scale(1) translate(0, 30px); }
}

.spectrum-bar {
  transition: width 0.1s ease-in-out;
}

.spectrum-bar:nth-child(even) {
  background: linear-gradient(160deg, rgba(200, 150, 255, 1), rgba(250, 100, 255, 1));
}

.spectrum-bar:nth-child(odd) {
  background: linear-gradient(160deg, rgba(150, 50, 255, 1), rgba(200, 100, 255, 1));
}

Validating your code, please wait...

HTML

CSS