La peur de manquer

243 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 July 2025

Formulaire d'inscription de connexion rotatif 3D HTML CSS

30 August 2024

Effet de survol de carte 3D

22 July 2025

Icône de chargement CSS Spinner

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

.notification {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #FF7F50;
  border-radius: 50%;
  animation: notify 1s linear infinite;
  transform-origin: center center;
}

@keyframes notify {
  0% { transform: scale(1); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.code-block {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #191A22;
  border-radius: 10px;
  opacity: 0.7;
  animation: code-flash 1s ease-in-out infinite alternate;
}

@keyframes code-flash { 
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

Recommandé

Formulaire d'inscription de connexion rotatif 3D HTML CSS

Effet de survol de carte 3D

Icône de chargement CSS Spinner

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS