La symphonie de la syntaxe

34 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 June 2024

Carte animée des réseaux sociaux

14 April 2023

Barre de navigation CSS responsive

25 May 2025

Un code par Liamgilles76

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é

Carte animée des réseaux sociaux

Barre de navigation CSS responsive

Un code par Liamgilles76

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS