Eche un vistazo a la función

675 byby.createsite

Abrir en el editor Publica tu código

Recomendado

8 September 2024

Pantalla de inicio de sesión avanzada

15 June 2025

Un código de Mete

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

.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 Function */
.function-box {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(to bottom right, #F0C30F, #66D9EF);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.function-box::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background:  linear-gradient(to top right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  border-radius: 50%;
  opacity: 0;
  animation: radial-expand-out 1s ease infinite alternate; 
}
@keyframes radial-expand-out {
  0% { 
    opacity: 0;
    transform: scale(0);
  }
  100% { 
    opacity: 1;
    transform: scale(1.2);
  }
}
.function-input {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 3px;
  user-select: none;
  animation: input-wiggle 1s ease-in-out infinite alternate;
}
@keyframes input-wiggle {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(2px, 2px);
  }
}

Eche un vistazo a la función

Recomendado

Pantalla de inicio de sesión avanzada

Agile Square

Un código de Mete

HTML

CSS

JS

Recomendado

Pantalla de inicio de sesión avanzada

Agile Square

Un código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS