CSS Animation Container: Upvote & Rewards

Open In Editor Publish Your Code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #141414; /* Preta escura para simular a noite */
  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: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background:transparent;
}
.you {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #F8F8F2;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.reward {
  position: absolute;
  width: 100px;
  height: 40px;
  background-color: #66D9EF;
  color: #FFFFFF;
  backdrop-filter: blur(4px);
  border-radius: 5px;
  padding: 10px 15px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  transform: translateX(-50%);
  animation: slideIn 3s ease-in-out infinite;
}
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

CSS Animation Container: Upvote & Rewards

Recommended

CSS Loading Animation Snippet

animation loading

Stylish CSS Button with Animated Text and Icon

HTML

CSS

JS

Recommended

CSS Loading Animation Snippet

animation loading

Stylish CSS Button with Animated Text and Icon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS