<kepala>
<meta charset="utf-8">
<tajuk>CSS3球狀網(wǎng)頁(yè)加載動(dòng)畫(huà)圖標(biāo)特效</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實(shí)現(xiàn)的網(wǎng)頁(yè)加載動(dòng)畫(huà)代碼，CSS3球狀網(wǎng)頁(yè)加載動(dòng)畫(huà)圖標(biāo)特效。