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

animation text

CSS Stage with Light Strings and Stairs

Link Text Animation

HTML

CSS

JS

Recommended

animation text

CSS Stage with Light Strings and Stairs

Link Text Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS