Eche un vistazo a la función

390 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

11 December 2024

Botón flotante

15 August 2025

Código HTML para tableta de dibujo con Javascript

31 July 2025

fallo en la máquina de realidad

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

Recomendado

Botón flotante

Código HTML para tableta de dibujo con Javascript

fallo en la máquina de realidad

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS