La symphonie de la syntaxe

268 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

26 March 2025

Formulaire en plusieurs étapes avec barre de progression utilisant jQuery et CSS3

9 July 2025

Liste des pistes et informations sur l'album Cowboy Carter

6 June 2025

CARTE DE CONNEXION

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); 
  } 
}

Recommandé

Formulaire en plusieurs étapes avec barre de progression utilisant jQuery et CSS3

Liste des pistes et informations sur l'album Cowboy Carter

CARTE DE CONNEXION

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS