होवर मेमोरी पुनरावर्ती रंग

अनुशंसित

11 December 2024

नेविगेशन होवर प्रभाव शुद्ध सीएसएस

27 November 2024

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

होवर मेमोरी पुनरावर्ती रंग

अनुशंसित

बटन होवर

नेविगेशन होवर प्रभाव शुद्ध सीएसएस

बटन होवर

HTML

CSS

JS

अनुशंसित

बटन होवर

नेविगेशन होवर प्रभाव शुद्ध सीएसएस

बटन होवर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS