Scheda sovraccarica

34 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

28 October 2024

Progettazione della scheda profilo

12 July 2025

Effetto bagliore della scheda CSS

19 May 2025

scheda flex-box

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

.tab {
  position: absolute;
  width: 80px;
  height: 40px;
  background-color: #333;
  border-radius: 8px;
  transform-origin: center;
  animation: tabPulse 1s infinite alternate;
  
}
@keyframes tabPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tab:nth-child(1) {
  left: 10%;
  top: 10%;
  animation-delay: 0s;
}
.tab:nth-child(2) {
  left: 30%;
  top: 10%;
  animation-delay: 0.2s;
}
.tab:nth-child(3) {
  left: 50%;
  top: 10%;
  animation-delay: 0.4s;
}
.tab:nth-child(4) {
  left: 70%;
  top: 10%;
  animation-delay: 0.6s;
}

Consigliato

Progettazione della scheda profilo

Effetto bagliore della scheda CSS

scheda flex-box

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS