CSS लोडिंग एनीमेशन स्निपेट

817 byby.createsite

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

10 August 2025

सीएसएस एलियन अंतरिक्ष यान एनीमेशन सितारों के साथ

23 November 2025

HTML न्यूरॉन एनीमेशन स्निपेट

HTML

CSS

/* Fundação 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;
    }

/* Core da Animação */
    .loading-element {
      /* Propriedades básicas */
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #FFFFFF;
      animation: loading-animation 1s linear infinite;
    }

/* Animação principais */
    .sobe {
      position: relative;
      top: 0;
      animation: sobe 5s ease-in-out infinite;
    }

@keyframes loading-animation {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
        background-color: #E6DB74;
      }
      100% {
        transform: scale(1);
      }
    }

@keyframes sobe {
      0% {
        transform: translateY(0%);
      }
      50% {
        transform: translateY(-20%);
      }
      100% {
        transform: translateY(0%);
      }
    }

CSS लोडिंग एनीमेशन स्निपेट

अनुशंसित

सीएसएस एलियन अंतरिक्ष यान एनीमेशन सितारों के साथ

जुगनू बटन HTML CSS टेलविंड

HTML न्यूरॉन एनीमेशन स्निपेट

HTML

CSS

JS

अनुशंसित

सीएसएस एलियन अंतरिक्ष यान एनीमेशन सितारों के साथ

जुगनू बटन HTML CSS टेलविंड

HTML न्यूरॉन एनीमेशन स्निपेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS