hover memory recursive colors

Open In Editor Publish Your Code

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

/* Animação das cores recursivas */
.item {
  width: 100px;
  height: 100px;
  background-color: #F8F8F2;
  border-radius: 100%; /* Forma circular */
  position: relative;
  animation: recursiva 3s infinite alternate;
}
.item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #A6E22E; /* Cor inicial */
  border-radius: 100%; /* Forma circular */
  animation: blur 3s infinite ease-in-out;
}
.item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.4); /* Cor de fundo */
  border-radius: 100%; /* Forma circular */
  animation: scale 3s infinite alternate;
}

@keyframes recursiva {
  0%, 100% {
    transform: scale(1); /* Retorna para o tamanho original */
  }
  50% {
    transform: scale(0.8); /* Reduz o tamanho */
  }
  
}
@keyframes blur {
  0% {
    background: radial-gradient(circle at 50% 50%, #A6E22E, #66D9EF 50px, #66D9EF); /* Foco no centro */
  }
  50% {
    background: radial-gradient(circle at 50% 50%, #66D9EF, #AE81FF 50px, #AE81FF); /* Mudança gradual */
  }
  100% {
    background: radial-gradient(circle at 50% 50%, #AE81FF, #E6DB74 50px, #E6DB74); 
  }
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  33% {
    transform: scale(1.1);
  }
  66% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

hover memory recursive colors

Recommended

Call Action Button Hover Effect

Rainbow Hover Button HTML Example

World Places (CSS 3d hover)

HTML

CSS

JS

Recommended

Call Action Button Hover Effect

Rainbow Hover Button HTML Example

World Places (CSS 3d hover)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS