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

656 byby.createsite

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

अनुशंसित

7 March 2025

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

20 August 2025

लॉगिन और पंजीकरण फ़ॉर्म HTML CSS टेम्पलेट

19 November 2025

लॉगिन पंजीकरण फॉर्म HTML CSS बायोमेट्रिक प्रमाणीकरण

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

अनुशंसित

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

लॉगिन और पंजीकरण फ़ॉर्म HTML CSS टेम्पलेट

लॉगिन पंजीकरण फॉर्म HTML CSS बायोमेट्रिक प्रमाणीकरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS