Webleb - Snippets de Código - A Sinfonia da Sintaxe

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: 20px;
      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;
    }
    /* 
     * Animação: Elementos ASCII
     * Deixar os elementos ASCII animados quando acessa a página

*/
    .element {
      position: relative;
      width: 20px;
      height: 20px;
      margin: 130px;
      font-size: 50px;
      display: inline-block;
      animation: syntaxNote 2s infinite alternate;
    }
   :root {
      --color1: #81d3f9;
      --color2: #f37683;
      --color3: #ffe305; 
      --color4: #00d27d; 
      --color5: #1dd482;

}
    @keyframes syntaxNote {
      0% {
        transform: scale(1);
        color: var(--color1);
      }
      50% {
        transform: scale(1.2);
        color: var(--color2);
      }
      100% {
        transform: scale(1);
        color: var(--color3);
      }
    }

/*
    * Animação: Line - Expressão Audiovisuua
     */

.container{

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;

}

.line{
  position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 10%;
background: linear-gradient(to right, var(--color4), var(--color5));
opacity: 0; 
animation: lineAnimation 2s ease-in-out infinite alternate; 
}
.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; }
/* 
* Animação: Syntax note animado 
*/
.note{ 
  position: relative; 
  display: block;
  color: white;
  font-size: 50px;
  animation:  noteAnimate 0.5s linear infinite alternate-reverse;

}

@keyframes noteAnimate { 
  0% { 
    transform: rotate(0deg); 
  }
  50% { 
    transform: rotate(10deg); 
  }  
  100% { 
    transform: rotate(0deg); 
  } 
}

A Sinfonia da Sintaxe

Recomendado

Aplicativo do tempo

Um Código por kouadioarmel055

Goku vs Vegeta

HTML

CSS

JS

Recomendado

Aplicativo do tempo

Um Código por kouadioarmel055

Goku vs Vegeta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS