peek into the function

Open In Editor Publish Your Code Need a Website?

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

peek into the function

Recommended

TheDoc Notes App

Animated Weather Card

Discover the message of the love letter

HTML

CSS

JS

Recommended

TheDoc Notes App

Animated Weather Card

Discover the message of the love letter

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS