Effet spécial d'icône d'animation de chargement de page Web sphérique CSS3

<tête>
<meta charset="utf-8">
<title>CSS3球状网页加载动画图标特效</title>
<style>
*, *:avant, *:après {
  dimensionnement de la boîte : border-box ;
  marge : 0;
  remplissage : 0 ;
}
:racine, html, corps {
  famille de polices : 'Poiret One', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif ;
  arrière-plan : #222;
  couleur : blanc ;
}
h1 {
  text-align: center;
  marge : 1rem auto 2rem ;
  poids de la police : normal ;
}
p {
  marge : 1rem;
}
.ligne {
  largeur : 80% ;
  hauteur : 150px ;
  marge : 2rem auto ;
}
.cellule {
  affichage : bloc en ligne ;
  largeur : 49% ;
  text-align: center;
}
.cercle {
  affichage : bloc en ligne ;
  largeur : 100 px ;
  hauteur : 100px ;
  rayon de bordure : 50 % ;
  fond : blancFumée ;
  box-shadow : 4px -40px 60px 5px rgb(26, 117, 206) encart ;
}
.carré {
  affichage : bloc en ligne ;
  largeur : 100 px ;
  hauteur : 100px ;
  rayon de bordure : 20 px ;
  fond : blancFumée ;
  box-shadow : 4px -40px 60px 5px rgb(26, 117, 206) encart ;
}

.loader {
  arrière-plan : dégradé linéaire (à droite, rgb(22, 113, 202) 50 %, transparent 50 %) ;
  animation : spin 1s linéaire infini ;
}
.loader : avant {
  affichage : bloc ;
  contenu : '';
  position : relative ;
  haut : 50 % ;
  gauche : 50% ;
  transformer : traduire(-50%, -50%);
  largeur : 90px ;
  hauteur : 90px ;
  arrière-plan : #222;
  rayon de bordure : 50 % ;
}

.gélatine {
  animation : gélatine 0,5s infinie ;
}
@keyframes gélatine {
  de, à { transform: scale(1, 1); }
  25 % { transformation : échelle (0,9, 1,1); }
  50 % { transformation : échelle (1,1, 0,9); }
  75 % { transformation : échelle (0,95, 1,05); }
}

.spin {
  animation : spin 1s linéaire infini ;
}
@keyframes tourne {
  from { transform: rotation(0deg); }
  à { transformer : rotation (360 deg); }
}

.elastic-spin {
  animation : elastic-spin 1s facilité infinie ;
}
@keyframes élastique-spin {
  from { transform: rotation(0deg); }
  à { transformer : rotation (720 deg); }
}

.pulse {
  animation : pulse 1s alternative infinie de facilité d'entrée ;
}
@keyframes pulse {
  de { transformation : échelle (0,8); }
  à { transformer : scale(1.2); }
}

.flash {
  animation : flash 500 ms, facilité alternée infinie ;
}
@keyframes flash {
de { opacité : 1 ; }
à { opacité : 0 ; }
}

.ici {
  animation : ici, la facilité est infinie ;
}
@keyframes ici {
  30 % { transformation : échelle (1,2); }
  40 %, 60 % { transformation : rotation (-20 deg) échelle (1,2 ); }
  50 % { transformation : rotation (20 degrés) échelle (1,2 ); }
  70% { transformation : rotation (0deg) échelle (1,2); }
  100 % { transformation : échelle (1); }
}

.grow {
  animation : grandir 2s facilité infinie ;
}
Les @keyframes grandissent {
  de { transformation : échelle (0); }
  à { transformer : échelle(1); }
}

.fondu entrant {
  animation : fondu d'entrée 2s linéaire infini ;
}
@keyframes fondu en entrée {
  de { opacité : 0 ; }
  à { opacité : 1 ; }
}

.fade-out {
  animation : fondu sortant 2s linéaire infini ;
}
Fondu en fondu des @keyframes {
  de { opacité : 1 ; }
  à { opacité : 0 ; }
}

.bounce {
  animation : rebond 2s facilité infinie ;
}
@keyframes rebondissent {
    70 % { transformer:translateY(0%); }
    80% { transformer:translateY(-15%); }
    90 % { transformer:translateY(0%); }
    95% { transformer:translateY(-7%); }
    97 % { transformer:translateY(0%); }
    99% { transformer:translateY(-3%); }
    100 % { transform:translateY(0); }
}

.bounce2 {
  animation : rebond2 2s facilité infinie ;
}
@keyframes rebond2 {
0 %, 20 %, 50 %, 80 %, 100 % {transform : translateY(0);}
40 % {transform : translateY(-30px);}
60 % {transform : translateY(-15px);}
}

.shake {
  animation : secouer 2s facilité infinie ;
}
@keyframes secouer {
0 %, 100 % {transform : translateX(0);}
10 %, 30 %, 50 %, 70 %, 90 % {transform : translateX(-10px);}
20 %, 40 %, 60 %, 80 % {transform : translateX(10px);}
}

.flip {
visibilité arrière : visible !important;
animation : flip 2s facilité infinie ;
}
@keyframes flip {
0% {
transformer : perspective(400px) rotateY(0);
fonction de synchronisation d'animation : facilité de sortie ;
}
40% {
transformer: perspective(400px) translationZ(150px) rotateY(170deg);
fonction de synchronisation d'animation : facilité de sortie ;
}
50 % {
transformer : perspective (400 px) translationZ (150 px) rotation Y (190 deg) échelle (1 ); 
fonction de synchronisation d'animation : facilité d'entrée ;
}
80 % {
transformation : perspective (400 px) rotation Y (360 degrés) échelle (.95) ;
fonction de synchronisation d'animation : facilité d'entrée ;
}
100% {
transformation : perspective (400 px) échelle (1); 
fonction de synchronisation d'animation : facilité d'entrée ;
}
}

.swing {
transform-origin : en haut au centre ;
animation : swing 2s facilité infinie ;
}
@keyframes balance {
20% { transformation : rotation (15 deg); }
40% { transformation : rotation (-10 deg); }
60% { transformation : rotation (5deg); }
80% { transformation : rotation (-5deg); }
100% { transformation : rotation (0deg); }
}

.wobble {
  animation : wobble 2s facilité infinie ;
}
@keyframes vacille {
  0% { transformation : traduireX(0%); }
  15% { transformation : traduireX(-25%) rotation(-5deg); }
  30% { transformation : traduireX(20%) rotation(3deg); }
  45% { transformation : traduireX(-15%) rotation(-3deg); }
  60 % { transformation : translateX(10 %) rotation(2deg); }
  75% { transformation : traduireX(-5%) rotation(-1deg); }
  100 % { transformation : traduireX(0%); }
}

.fade-in-down {
  animation : fondu enchaîné 2s, facilité infinie ;
}
@keyframes fondu enchaîné {
  0% {
    opacité : 0;
    transformer : traduireY(-20px);
  }
  100% {
    opacité : 1;
    transformer : traduireY(0);
  }
}

.fondu à gauche {
  animation : fondu d'entrée à gauche 2 s, facilité infinie ;
}
@keyframes fondu à gauche {
  0% {
    opacité : 0;
    transformer : traduireX(-20px);
  }
  100% {
    opacité : 1;
    transformer : traduireX(0);
  }
}

.fade-out-down {
  animation : fondu enchaîné en 2 secondes, facilité infinie ;
}
@keyframes fondu enchaîné {
  0% {
    opacité : 1;
    transformer : traduireY(0);
  }
  100% {
    opacité : 0;
    transformer : traduireY(20px);
  }
}

.fade-out-right {
  animation : fondu sortant à droite 2 s, facilité infinie ;
}
@keyframes fondu à droite {
  0% {
    opacité : 1;
    transformer : traduireX(0);
  }
  100% {
    opacité : 0;
    transformer : translateX(20px);
  }
}

.bounce-in {
  animation : rebond en 2 s, facilité infinie ;
}
@keyframes rebondissent {
  0% {
    opacité : 0;
    transformer : scale(.3);
  }
  50 % {
    opacité : 1;
    transformer : échelle(1.05);
  }
  70 % { transformation : échelle (.9); }
  100 % { transformation : échelle (1); }
}

.bounce-in-right {
  animation : rebond à droite 2s facilité infinie ;
}
@keyframes rebondissent à droite {
  0% {
    opacité : 0;
    transformer : translateX(2000px);
  }
  60 % {
    opacité : 1;
    transformer : translateX(-30px);
  }
  80 % { transformation : traduireX(10px); }
  100 % { transformation : traduireX(0); }
}

.bounce-out {
  animation : rebond 2s facilité infinie ;
}
@keyframes rebondissent {
  0% { transformation : échelle (1); }
  25 % { transformation : échelle (.95); }
  50 % {
    opacité : 1;
    transformer : scale(1.1);
  }
  100% {
    opacité : 0;
    transformer : scale(.3);
  } 
}

.bounce-out-down {
  animation : rebond 2 s, facilité infinie ;
}
@keyframes rebondissent {
  0% { transformation : traduireY(0); }
  20% {
    opacité : 1;
    transformer : traduireY(-20px);
  }
  100% {
    opacité : 0;
    transformer : traduireY(20px);
  }
}

.rotation-en-bas-gauche {
  animation : rotation en bas à gauche pendant 2 secondes, facilité infinie ;
}
@keyframes rotation en bas à gauche {
  0% {
    transform-origin : en bas à gauche ;
    transformation : rotation (-90 deg);
    opacité : 0;
  }
  100% {
    transform-origin : en bas à gauche ;
    transformation : rotation(0);
    opacité : 1;
  }
}

.rotation-en-haut-gauche {
  animation : rotation vers le haut et vers la gauche pendant 2 secondes, facilité infinie ;
}
@keyframes rotation vers le haut-gauche {
  0% {
    transform-origin : en bas à gauche ;
    transformation : rotation (90 deg); 
    opacité : 0;
  }
  100% {
    transform-origin : en bas à gauche ;
    transformation : rotation(0);
    opacité : 1;
  }
}

.charnière {
  animation : charnière 2s facilité infinie ;
}
Charnière @keyframes {
  0% { transformation : rotation (0); transformation-origine : en haut à gauche ; fonction de synchronisation d'animation : entrée et sortie faciles ; }  
  20 %, 60 % { transformation : rotation (80 deg); transformation-origine : en haut à gauche ; fonction de synchronisation d'animation : entrée et sortie faciles ; }  
  40% { transformation : rotation (60 deg); transformation-origine : en haut à gauche ; fonction de synchronisation d'animation : entrée et sortie faciles ; } 
  80% { transformation : rotation (60 degrés) translationY (0); opacité : 1 ; transformation-origine : en haut à gauche ; fonction de synchronisation d'animation : entrée et sortie faciles ; } 
  100 % { transformation : traduireY(700px); opacité : 0 ; }
}

.roll-in {
  animation : roll-in 2s facilité infinie ;
}
@keyframes roll-in {
  0% {
    opacité : 0;
    transformer : translateX(-100%) rotation(-120deg);
  }
  100% {
    opacité : 1;
    transformer : translateX(0px) rotate(0deg);
  }
}

.déploiement {
  animation : déploiement 2s facilité infini ;
}
Déploiement des @keyframes {
    0% {
    opacité : 1;
    transformer : translateX(0px) rotate(0deg);
  }
  100% {
    opacité : 0;
    transformer : translateX(100%) rotation(120deg);
  }
}
</style>

</tête>
<body><script src="/demos/googlegg.js"></script>
<h1>Animation CSS</h1>
<div class="row">
  <div class="cellule">
    <div class="circle loader"></div>
    <p>loader</p>
  </div>
  <div class="cellule">
    <div class="cercle gélatine"></div>
    <p>gélatine</p>
  </div>
</div>
<div class="row">

La transformation CSS3 est une transformation CSS3.