Animação de interface flutuante CSS

955 byby.createsite

Abrir no Editor Video Publique Seu Código

Recomendado

28 September 2025

Exemplo de animação de carregamento CSS

12 September 2025

Controle deslizante de imagem HTML CSS JavaScript

17 October 2025

Modelo HTML de portfólio de web designer

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;
}
.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 50%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
} .selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } .value-color    { color: #A6E22E; } .brace          { color: #F8F8F2; } .comment        { color: #75715E; } .function       { color: #A6E22E; }

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

/* Interface Flutuante */
.interface {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #FFF;
  animation: float 5s ease-in-out infinite;

}

.interface::after,
.interface::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: pulsate 2s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate0deg;
  }
  50% {
    transform: translateY(5px) rotate(10deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }

100% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

Recomendado

Exemplo de animação de carregamento CSS

Controle deslizante de imagem HTML CSS JavaScript

Modelo HTML de portfólio de web designer

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS