CSS3 sfera laman web memuatkan ikon animasi kesan khas

<kepala>
<meta charset="utf-8">
<tajuk>CSS3球状网页加载动画图标特效</title>
<gaya>
*, *:sebelum, *:selepas {
  saiz kotak: kotak sempadan;
  jidar: 0;
  pelapik: 0;
}
:root, html, body {
  keluarga fon: 'Poiret One', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  latar belakang: #222;
  warna: putih;
}
h1 {
  penjajaran teks: tengah;
  jidar: 1rem auto 2rem;
  berat fon: biasa;
}
p {
  jidar: 1rem;
}
.baris {
  lebar: 80%;
  ketinggian: 150px;
  margin: 2rem auto;
}
.sel {
  paparan: inline-block;
  lebar: 49%;
  penjajaran teks: tengah;
}
.bulatan {
  paparan: inline-block;
  lebar: 100px;
  ketinggian: 100px;
  jejari sempadan: 50%;
  latar belakang: whiteSmoke;
  bayang kotak: 4px -40px 60px 5px rgb(26, 117, 206) sisipan;
}
.persegi {
  paparan: inline-block;
  lebar: 100px;
  ketinggian: 100px;
  jejari sempadan: 20px;
  latar belakang: whiteSmoke;
  bayang kotak: 4px -40px 60px 5px rgb(26, 117, 206) sisipan;
}

.pemuat {
  latar belakang: kecerunan linear(ke kanan, rgb(22, 113, 202) 50%, lutsinar 50%);
  animasi: putaran 1s linear tak terhingga;
}
.loader:sebelum {
  paparan: blok;
  kandungan: '';
  jawatan: saudara;
  atas: 50%;
  kiri: 50%;
  ubah: terjemah(-50%, -50%);
  lebar: 90px;
  ketinggian: 90px;
  latar belakang: #222;
  jejari sempadan: 50%;
}

.gelatin {
  animasi: gelatin 0.5s tak terhingga;
}
@keyframes gelatin {
  daripada, kepada { transform: skala(1, 1); }
  25% { transform: skala(0.9, 1.1); }
  50% { transform: skala(1.1, 0.9); }
  75% { transform: skala(0.95, 1.05); }
}

.pusing {
  animasi: putaran 1s linear tak terhingga;
}
@keyframes berputar {
  daripada { transform: rotate(0deg); }
  kepada { transform: rotate(360deg); }
}

.anjal-putaran {
  animasi: anjal-putaran 1s kemudahan tak terhingga;
}
@keyframes elastik-putaran {
  daripada { transform: rotate(0deg); }
  kepada { transform: rotate(720deg); }
}

.denyutan {
  animasi: nadi 1s kemudahan masuk-keluar yang tidak terhingga silih berganti;
}
@keyframes nadi {
  daripada { transform: skala (0.8); }
  kepada { transform: skala (1.2); }
}

.flash {
  animasi: kilat 500ms memudahkan tak terhingga silih berganti;
}
@keyframes berkelip {
daripada { kelegapan: 1; }
kepada { kelegapan: 0; }
}

.sini {
  animasi: di sini 1s memudahkan tak terhingga;
}
@keyframes di sini {
  30% { transform: skala(1.2); }
  40%, 60% { transform: rotate(-20deg) skala(1.2); }
  50% { transform: putar(20deg) skala(1.2); }
  70% { transform: putar(0deg) skala(1.2); }
  100% { transform: skala(1); }
}

.tumbuh {
  animasi: tumbuh 2s memudahkan tak terhingga;
}
@keyframes berkembang {
  daripada { transform: skala (0); }
  kepada { transform: skala (1); }
}

.fade-in {
  animasi: fade-in 2s linear infinite;
}
@keyframes fade-in {
  daripada { kelegapan: 0; }
  kepada { kelegapan: 1; }
}

.pudar {
  animasi: pudar 2s linear tak terhingga;
}
@keyframes pudar {
  daripada { kelegapan: 1; }
  kepada { kelegapan: 0; }
}

.melantun {
  animasi: lantunan 2s memudahkan tak terhingga;
}
@keyframes melantun {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

.melantun2 {
  animasi: lantunan2 2s memudahkan tak terhingga;
}
@keyframes melantun2 {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}

.goncang {
  animasi: goncang 2s memudahkan tak terhingga;
}
@keyframes goncang {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.terbalikkan {
kebolehlihatan muka belakang: kelihatan !penting;
animasi: flip 2s memudahkan infiniti;
}
@keyframes flip {
0% {
transform: perspective(400px) rotateY(0);
fungsi-masa-animasi: ease-out;
}
40% {
transform: perspektif(400px) translateZ(150px) rotateY(170deg);
fungsi-masa-animasi: ease-out;
}
50% {
transform: perspektif(400px) translateZ(150px) rotateY(190deg) skala(1);
fungsi-masa-animasi: mudah masuk;
}
80% {
transform: perspektif(400px) rotateY(360deg) skala(.95);
fungsi-masa-animasi: mudah masuk;
}
100% {
transform: skala perspektif(400px)(1);
fungsi-masa-animasi: mudah masuk;
}
}

.hayun {
transform-asal: tengah atas;
animasi: hayunan 2s memudahkan tak terhingga;
}
@keyframes hayun {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}

.goyang {
  animasi: goyah 2s memudahkan tak terhingga;
}
@keyframes goyah {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.fade-in-down {
  animasi: fade-in-down 2s memudahkan infiniti;
}
@keyframes fade-in-down {
  0% {
    kelegapan: 0;
    transform: translateY(-20px);
  }
  100% {
    kelegapan: 1;
    transform: translateY(0);
  }
}

.fade-in-left {
  animasi: pudar-dalam-kiri 2s memudahkan tak terhingga;
}
@keyframes fade-in-left {
  0% {
    kelegapan: 0;
    transform: translateX(-20px);
  }
  100% {
    kelegapan: 1;
    transform: translateX(0);
  }
}

.fade-out-down {
  animasi: fade-out-down 2s memudahkan tak terhingga;
}
@keyframes fade-out-down {
  0% {
    kelegapan: 1;
    transform: translateY(0);
  }
  100% {
    kelegapan: 0;
    transform: translateY(20px);
  }
}

.fade-out-kanan {
  animasi: pudar-keluar-kanan 2s memudahkan tak terhingga;
}
@keyframes pudar-keluar-kanan {
  0% {
    kelegapan: 1;
    transform: translateX(0);
  }
  100% {
    kelegapan: 0;
    transform: translateX(20px);
  }
}

.melantun masuk {
  animasi: lantun masuk 2s memudahkan tanpa had;
}
@keyframes melantun masuk {
  0% {
    kelegapan: 0;
    transform: skala(.3);
  }
  50% {
    kelegapan: 1;
    transform: skala(1.05);
  }
  70% { transform: skala (.9); }
  100% { transform: skala(1); }
}

.melantun-ke-kanan {
  animasi: lantun ke kanan 2s memudahkan tanpa had;
}
@keyframes melantun ke kanan {
  0% {
    kelegapan: 0;
    transform: translateX(2000px);
  }
  60% {
    kelegapan: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

.melantun-keluar {
  animasi: melantun keluar 2s memudahkan tanpa had;
}
@keyframes melantun keluar {
  0% { transform: skala(1); }
  25% { transform: skala(.95); }
  50% {
    kelegapan: 1;
    transform: skala(1.1);
  }
  100% {
    kelegapan: 0;
    transform: skala(.3);
  } 
}

.melantun-keluar-ke bawah {
  animasi: lantun-keluar-bawah 2s memudahkan tak terhingga;
}
@keyframes melantun-keluar-ke bawah {
  0% { transform: translateY(0); }
  20% {
    kelegapan: 1;
    transform: translateY(-20px);
  }
  100% {
    kelegapan: 0;
    transform: translateY(20px);
  }
}

.putar-ke-bawah-kiri {
  animasi: putar-dalam-bawah-kiri 2s memudahkan infiniti;
}
@keyframes putar-dalam-bawah-kiri {
  0% {
    transform-origin: kiri bawah;
    transform: putar(-90deg);
    kelegapan: 0;
  }
  100% {
    transform-origin: kiri bawah;
    transform: putar(0);
    kelegapan: 1;
  }
}

.putar-ke-atas-kiri {
  animasi: putar ke atas-kiri 2s memudahkan tak terhingga;
}
@keyframes putar ke atas-kiri {
  0% {
    transform-origin: kiri bawah;
    transform: putar(90deg);
    kelegapan: 0;
  }
  100% {
    transform-origin: kiri bawah;
    transform: putar(0);
    kelegapan: 1;
  }
}

.engsel {
  animasi: engsel 2s memudahkan tak terhingga;
}
@keyframes engsel {
  0% { transform: rotate(0); transform-origin: kiri atas; animasi-fungsi-masa: kemudahan-keluar; }  
  20%, 60% { transform: rotate(80deg); transform-origin: kiri atas; animasi-fungsi-masa: kemudahan-keluar; }  
  40% { transform: rotate(60deg); transform-origin: kiri atas; animasi-fungsi-masa: kemudahan-keluar; } 
  80% { transform: rotate(60deg) translateY(0); kelegapan: 1; transform-origin: kiri atas; animasi-fungsi-masa: kemudahan-keluar; } 
  100% { transform: translateY(700px); kelegapan: 0; }
}

.roll-in {
  animasi: roll-in 2s memudahkan infiniti;
}
@keyframes roll-in {
  0% {
    kelegapan: 0;
    ubah: translateX(-100%) putar(-120deg);
  }
  100% {
    kelegapan: 1;
    transform: translateX(0px) rotate(0deg);
  }
}

.pelancaran {
  animasi: melancarkan 2s memudahkan tanpa had;
}
@keyframes dilancarkan {
    0% {
    kelegapan: 1;
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    kelegapan: 0;
    transform: translateX(100%) rotate(120deg);
  }
}
</style>

</head>
<body><script src="/demos/googlegg.js"></script>
<h1>Animasi CSS</h1>
<div class="row">
  <div class="cell">
    <div class="pemuat bulatan"></div>
    <p>pemuat</p>
  </div>
  <div class="cell">
    <div class="circle gelatine"></div>
    <p>gelatine</p>
  </div>
</div>
<div class="row">

多款CSS3 transform实现的网页加载动画代码，CSS3球状网页加载动画图标特效。