pemuat
lokasi sekarang:Rumah>Muat turun>Kesan JS>Kesan khas CSS3>CSS3 sfera laman web memuatkan ikon animasi kesan khas
![CSS3 sfera laman web memuatkan ikon animasi kesan khas](https://img.php.cn/upload/jscode/000/000/001/5a5311310c4fe402.png)
CSS3 sfera laman web memuatkan ikon animasi kesan khas
Mengelaskan:Kesan JS/Kesan khas CSS3 | Masa keluaran: 2018-01-08 | lawatan: 1763 |
Muat turun: 47 |
Muat turun terkini
Akuarium Fantasi
Gadis Barisan Hadapan
Sayap Bintang
Syurga Peri Peri Bunga Kecil
Kisah Comel Restoran
Penjelajahan Pelancongan Shanhe
Cinta dan Pengeluar
Otak yang paling berkuasa 3
Debu Ganjil: Damila
Perjalanan Muda ke Barat 2
24 jamPapan pendahulu membaca
- 1"Garis Panduan Pelaksanaan untuk Pembangunan Transformasi Kolaboratif Digital dan Hijau" dikeluarkan untuk menggalakkan penyepaduan mendalam teknologi baru muncul seperti Internet, data besar, kecerdasan buatan dan 5G dengan industri hijau dan rendah karbon.
- 2Zig Tanggapan Pertama daripada JS Dev
- 3Saya menulis Reconciler saya sendiri (React)
- 4Cara Mengesan jika Pengguna berada dalam Mod Gelap Dalam Js
- 5Butiran OPPO ColorOS 15 terdedah: kertas dinding medan kedalaman berlapis baharu, awan cecair menyokong lebih banyak paparan maklumat
- 6Apakah pemproses yang dilengkapi dengan Xiaomi Mi Pad 6max?
- 7(Kemas kini: Kembali kepada normal) Stim terhempas! Orang takdir "Black Myth: Wukong " tiba-tiba menemui "Kesukaran ke-82"
- 8Amaechi melancarkan hos mini Starship M2A: i9-12900H + RTX 3080, dua port rangkaian 2.5G, 8999 yuan
- 9Perbezaan Antara var, let, dan const Melalui Prisma Standard ECMAScript.
- 10Penyelidik DeFi, Ignas Berkongsi Cerapan tentang Pemangkin Kripto Akan Datang Dijangka Menyalakan Dinamik Dalaman
- 11Harga Xiaomi tablet 6max
- 12Cardano (ADA) Chang Hard Fork Ditunda Sehingga September kerana Bursa Memerlukan Lebih Banyak Masa untuk Bersedia
- 13Crypto All-Stars ($STARS) Berjanji untuk Menggegarkan Ruang Syiling Meme dengan MemeVault
- 14Apakah markah penanda aras Xiaomi Mi Pad 6max?
- 15Harga Bitcoin (BTC) Meningkat kepada $64,955 Selepas Jerome Powell Membayangkan Pemotongan Kadar Fed
Tutorial Terkini
-
- Koleksi lengkap kursus timbunan penuh pembangunan web asing
- 1044 2024-04-24
-
- Gunakan GraphQL praktikal bahasa
- 1334 2024-04-19
-
- Bermula dengan MySQL (Teacher mosh)
- 1249 2024-04-07
-
- Mock.js |. Axios.js |
- 2100 2024-03-29
gelatine 多款CSS3 transform实现的网页加载动画代码,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
Cadangan berkaitan
Cadangan popular
- Tentang kita Penafian Sitemap
- Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!