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

CSS Animation Layers: Coding, Debugging, Fragments

Recommended

CSS Fragment Animation Example

CSS Cards Carousel

Office CSS Art

HTML

CSS

JS

Recommended

CSS Fragment Animation Example

CSS Cards Carousel

Office CSS Art

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS