Eche un vistazo a la función

1,383 0 byby.createsite Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

23 November 2025

Botón Luciérnaga HTML CSS Tailwind

13 October 2026

Infinite Craft html

16 September 2025

Carrusel de tarjetas 3D HTML CSS JavaScript

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

Comments 0

…