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

Gallery of sites with hover and blur effect

Buttons Gradient Hover

Button Hover

HTML

CSS

JS

Recommended

Gallery of sites with hover and blur effect

Buttons Gradient Hover

Button Hover

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS