Maison > Article > interface Web > Environ 20 effets d'animation de chargement produits par CSS3

Environ 20 effets d'animation de chargement produits par CSS3

不言original: 2018-06-28 10:18:502252parcourir

Cet article présente principalement l'explication détaillée de 20 effets d'animation de chargement produits par CSS3 pur. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Lorsque certains sites Web ou applications chargent de nouvelles choses, ils ont souvent des images de chargement belles et intéressantes. La plupart des styles de chargement peuvent être écrits en utilisant CSS3, ce qui est non seulement plus facile et plus pratique que d'utiliser directement des images GIF, mais aussi Pour économiser du temps et de l'espace de chargement, je publierai ci-dessous les codes de 20 animations de chargement courantes pour que tout le monde puisse s'y référer et apprendre ensemble.

Il y a beaucoup de codes publiés, vous pouvez aller sur mon GitHub pour télécharger et voir le code source

L'image de l'effet est :

Voici le code html correspondant :

<!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>

Le code css3 est un peu long, tous écrits Puisqu'ils sont tous ensemble, je ne les publierai pas. Pour plus de détails, allez sur github pour vérifier

Ce qui précède est l'intégralité du contenu de cet article, je l'espère. sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos des contrôles d'embellissement des formulaires CSS3

Trois types de styles de contrôle CSS vérifiés via la méthode de comparaison des priorités

Comment implémenter des effets d'animation d'inclinaison et de rotation simultanément avec CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php css css3 html github

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À propos de la façon de dessiner des hexagones en CSS3Article suivant：À propos de la façon de dessiner des hexagones en CSS3

Articles Liés

Voir plus