Webleb - UI Elements - CSS Animation Layers: Coding, Debugging, Fragments

HTML

CSS

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 background:url("./thumb.jpg") no-repeat center center;
 background-color: black;
 background-size: cover;
 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: 25%;
 max-width: 75%;
 width: 75%;
 height: 25%;
 top:15%;
 overflow-y: hidden;
 box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
}

.selector { color: #F92672; }
.property { color: #66D9EF; }
.value-number { color: #AE81FF; }
.value-string { color: #E6DB74; }
.value-color { color: #A6E22E; }
.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;
}

.loading-element {
 animation: loading-animation 1s linear infinite;
}

@keyframes loading-animation {
  0% { transform: scale(0.1) rotate(45deg); }
  100% { transform: scale(1) rotate(360deg); }
}

.coding-layer {
  background-image: linear-gradient(#fff, #000);
  background-size: 100% 2px;
  background-position: 0 0;
  animation: coding-animation 1s linear infinite;
}

@keyframes coding-animation {
  0% { background-position: 0 0; }
  100% { background-position: 0 100vh; }
}

.debugging-layer {
  background-color: #ff7e67;
  animation: debugging-animation 1s linear infinite;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: scale(0);
}

@keyframes debugging-animation {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.code-fragment {
  background-color: #f92672;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  animation: fragment-animation 1s linear infinite;
}

@keyframes fragment-animation {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.complexity-layer {
  background-image: linear-gradient(#fff, #000);
  background-size: 100% 2px;
  background-position: 0 0;
  animation: complexity-animation 1s linear infinite;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

@keyframes complexity-animation {
  0% { background-position: 0 0; }
  100% { background-position: 0 100vh; }
}

.fragmented-layer {
  background-color: #66d9ef;
  animation: fragment-animation 1s linear infinite;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

@keyframes fragment-animation {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

JS

CSS Animation Layers: Coding, Debugging, Fragments

Recommended