CSS3球状网页加载动画图标特效

*, *: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);
}
}

Animasi CSS

Kenyataan Laman Web ini

Semua sumber di laman web ini disumbangkan dan diterbitkan oleh netizen, atau dicetak semula oleh tapak muat turun utama. Sila semak integriti perisian itu sendiri! Semua sumber di laman web ini adalah untuk pembelajaran dan rujukan sahaja. Tolong jangan gunakannya untuk tujuan komersial, jika tidak, anda akan bertanggungjawab untuk semua akibat yang ditanggung! Jika terdapat sebarang pelanggaran, sila hubungi kami untuk memadam dan mengalih keluarnya. Maklumat hubungan: admin@php.cn