简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Etwa 20 von CSS3 erzeugte Ladeanimationseffekte

Etwa 20 von CSS3 erzeugte Ladeanimationseffekte

不言
不言Original
2018-06-28 10:18:502203Durchsuche

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung von 20 Ladeanimationseffekten vor, die von reinem CSS3 erzeugt werden. Ich werde ihn jetzt mit Ihnen teilen und als Referenz geben.

Wenn einige Websites oder Apps neue Dinge laden, verfügen sie oft über einige schöne und interessante Ladebilder. Die meisten Ladestile können mit CSS3 geschrieben werden, was nicht nur einfacher und bequemer ist als die direkte Verwendung von GIF-Bildern, Aber auch um Zeit und Platz beim Laden zu sparen, werde ich unten die Codes von 20 gängigen Ladeanimationen veröffentlichen, damit alle darauf zugreifen und gemeinsam lernen können.

Es sind viele Codes veröffentlicht. Sie können zu meinem GitHub gehen, um den Quellcode herunterzuladen und anzuzeigen

Das Effektbild ist:

Das Folgende ist der entsprechende HTML-Code: 

<!doctype html>
<head>
<meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="demo.css"/>
    <link rel="stylesheet" type="text/css" href="loaders.css"/>
    <title>css3炫酷页面加载动画特效代码 </title>
</head>
<body>
  <main>
    <p class="loaders">
      <p class="loader">
        <p class="loader-inner ball-pulse">
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-grid-pulse">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-clip-rotate">
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-clip-rotate-pulse">
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner square-spin">
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-clip-rotate-multiple">
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-pulse-rise">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-rotate">
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner cube-transition">
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-zig-zag">
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-zig-zag-deflect">
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-triangle-path">
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-scale">
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner line-scale">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner line-scale-party">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-scale-multiple">
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-pulse-sync">
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-beat">
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner line-scale-pulse-out">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner line-scale-pulse-out-rapid">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-scale-ripple">
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-scale-ripple-multiple">
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-spin-fade-loader">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner line-spin-fade-loader">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner triangle-skew-spin">
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner pacman">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner ball-grid-beat">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </p>
      </p>
      <p class="loader">
        <p class="loader-inner semi-circle-spin">
          <p></p>
        </p>
      </p>
    </p>
  </main>
  <script>
    document.addEventListener(&#39;DOMContentLoaded&#39;, function () {
      document.querySelector(&#39;main&#39;).className += &#39;loaded&#39;;
    });
  </script>


</body>
</html>

Das CSS3 Der Code ist etwas lang und wird nicht veröffentlicht. Weitere Informationen finden Sie auf Github. Ich hoffe, dass er für alle hilfreich ist Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Über CSS3-Formularverschönerungssteuerelemente


Drei Arten von CSS-Steuerelementstilen, die durch den Prioritätsvergleich überprüft werden Way


So implementieren Sie gleichzeitig Neigungs- und Drehanimationseffekte mit CSS3


Das obige ist der detaillierte Inhalt vonEtwa 20 von CSS3 erzeugte Ladeanimationseffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css css3 html github
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Informationen zum Zeichnen von Sechsecken in CSS3Nächster Artikel：Informationen zum Zeichnen von Sechsecken in CSS3

In Verbindung stehende Artikel

Mehr sehen