dê uma olhada na função

224 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

27 November 2024

gerador de citações

25 July 2025

Modelo de página de login HTML

18 November 2024

Modelo de site de portfólio moderno

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

gerador de citações

Modelo de página de login HTML

Modelo de site de portfólio moderno

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS