lokasi sekarang： Rumah > Muat turun > Kesan JS > Kesan khas CSS3 > CSS3 kesan khas kucing tergantung pada rentetan berayun animasi kiri dan kanan

CSS3 kesan khas kucing tergantung pada rentetan berayun animasi kiri dan kanan

Mengelaskan: Kesan JS / Kesan khas CSS3	Masa keluaran: 2017-12-18	lawatan: 1923
Muat turun: 56

Klik untuk memuat turun Kesan pratonton

Lagi>

Muat turun terkini

Akuarium Fantasi

"Fantasy Aquarium" ialah permainan pengembaraan fantasi yang membolehkan pemain meneroka dunia bawah air yang misteri. Dalam akuarium imaginatif ini, pemain akan memainkan peranan sebagai pengurus dan pakar akuarium

0 2024-05-08

Gadis Barisan Hadapan

"Girls' Frontline" ialah permainan main peranan strategi yang dibangunkan oleh SUNBORN Games. Dalam dunia masa depan ini, manusia dan gadis robot sedang bertempur Anda akan memainkan peranan sebagai komander dan mengetuai tentera robot perempuan yang unik dalam siri pertempuran yang mendebarkan. Ciri permainan: Kem besar gadis robot: Kumpul dan latih gadis robot dengan gaya dan kebolehan berbeza untuk membina pasukan terkuat anda sendiri. Latar plot yang mendalam: Berkomunikasi dengan gadis robot dan dapatkan pemahaman yang lebih mendalam tentang latar belakang cerita mereka, memberikan sokongan dan galakan kepada mereka dalam pertempuran. Grafik pertempuran yang indah: Nikmati adegan pertempuran yang cantik

832 2024-05-06

Sayap Bintang

"Star Wings" ialah permainan kompetitif 3D yang menggabungkan elemen gadis mecha dengan sempurna dengan permainan pertempuran GVG klasik. Dalam permainan, pemain akan mengawal seorang gadis mecha dengan kuasa tempur yang kuat untuk terlibat dalam pertempuran sengit 1V1 dan 2V2 di medan perang yang menarik, merasakan daya tarikan persaingan yang tiada tandingannya. Permainan ini menggunakan teknologi pemodelan 3D berketepatan tinggi untuk mempersembahkan grafik yang cantik. Setiap mecha adalah unik dan menggambarkan struktur mekanikal yang penuh dengan teknologi dan sosok gadis yang anggun, seolah-olah ia adalah filem blockbuster animasi yang aktif di tapak tangan anda. Juruterbang gadis cantik itu masing-masing mempunyai daya tarikan tersendiri, dan ciri personaliti mereka yang berbeza terserlah melalui suara dan tindakan mereka.

521 2024-05-06

‎Syurga Peri Peri Bunga Kecil

"Little Flower Fairy Fairy Paradise" ialah permainan kasual yang penuh dengan keseronokan dan keajaiban seperti kanak-kanak, membawa pengalaman permainan yang indah kepada majoriti pemain. Dalam permainan, anda akan memainkan peranan sebagai peri bunga kecil dan memasuki Syurga Elf bersama pemain lain untuk memulakan pengembaraan yang penuh dengan kejutan. Ciri permainan: Pengembaraan ajaib baharu: Nikmati pengembaraan Elf Paradise baharu dengan grafik yang lebih indah. Grafik permainan yang indah: Permainan ini menggunakan teknologi 3D terkini untuk mencipta grafik permainan yang cantik, memberikan pemain kejutan visual yang serba baharu. Pelbagai aktiviti: Dalam permainan, pemain boleh mengambil bahagian dalam pelbagai aktiviti dan memperoleh sejumlah besar ganjaran permainan. kaya raya

703 2024-05-06

Kisah Comel Restoran

"Kisah Comel Restoran" ialah permainan simulasi pengurusan restoran yang comel. Dalam permainan ini, anda akan memainkan peranan sebagai pemilik restoran muda Dengan mengendalikan dan menguruskan restoran, anda akan mengalu-alukan sekumpulan pelanggan comel dan mencipta restoran yang unik dan sibuk. Ciri permainan: Pelanggan haiwan comel: Terdapat pelbagai watak haiwan comel sebagai pelanggan dalam permainan Setiap haiwan mempunyai pilihan dan keperluan sendiri Anda perlu menyediakan hidangan yang paling sesuai mengikut pilihan mereka. Sesuaikan restoran anda: Daripada hiasan kepada perabot, anda boleh mencipta restoran yang unik mengikut pilihan dan kreativiti anda sendiri untuk menarik lebih ramai pelanggan. Menu pelbagai: dalam permainan

574 2024-05-05

‎Penjelajahan Pelancongan Shanhe

Pengenalan permainan "Shanhe Travel Detective" "Shanhe Travel Detective" ialah jalan cerita yang menarik dengan permainan penaakulan dan penyiasatan gaya Cina. Permainan ini dengan bijak menggabungkan unsur budaya tradisional Cina dengan penaakulan klasik dan permainan penyiasatan, memberikan pemain dunia permainan yang penuh dengan misteri dan kejutan. Dalam permainan, pemain akan memainkan peranan sebagai detektif muda yang berbakat, mengembara melalui gunung dan sungai untuk meneroka pelbagai kes yang rumit dan mengelirukan. Setiap kes direka dengan teliti dan penuh dengan ketegangan dan cabaran Pemain perlu menggunakan kebijaksanaan dan pemerhatian untuk mengumpul petunjuk dan menyimpulkan kebenaran. Permainan ini mempunyai gaya grafik yang unik, yang menggunakan gaya Cina yang cantik dan menggabungkan bahasa Cina kuno

946 2024-05-05

Cinta dan Pengeluar

"Love and Producer" ialah permainan mudah alih berorientasikan wanita yang dibangunkan oleh Elex Ia adalah permainan jenis pembangunan cinta. Dalam permainan ini, anda akan bermain sebagai penerbit dan memulakan perjalanan romantis dengan empat protagonis lelaki yang tersendiri. Ciri permainan: Alih suara orang sebenar, memulihkan pengalaman plot yang paling realistik. Plot permainan yang kaya dan turun naik cerita emosi membuatkan anda tenggelam dalam permainan. Memulihkan operasi permainan AR dengan sempurna, membolehkan anda menikmati permainan dengan lebih baik. Permainan yang unik membolehkan anda memahami protagonis dengan lebih mendalam dan mengalami jenis cinta yang berbeza. Dapatkan prop melalui tugasan dan aktiviti, dan gunakannya untuk meningkatkan sifat wira.

519 2024-05-04

Otak yang paling berkuasa 3

"The Biggest Brain 3" ialah permainan persaingan intelektual yang menarik dan menarik yang mencabar had otak anda dan menunjukkan kebijaksanaan dan kemahiran anda. Dalam permainan ini, pemain akan menghadapi pelbagai cabaran mental, termasuk penyahsulitan, penaakulan, ingatan dan topik lain, supaya otak anda boleh melakukan latihan menyeluruh. Ciri permainan: Tema cabaran yang pelbagai, meliputi pelbagai medan seperti penyahsulitan, penaakulan, ingatan, dsb., memastikan anda tidak akan bosan. Reka bentuk tahap yang kaya, secara beransur-ansur meningkatkan kesukaran, mencabar had IQ anda. Pelbagai mod permainan tersedia, termasuk cabaran pemain tunggal dan pertempuran berbilang pemain, membolehkan anda bersaing dengan rakan anda terhadap IQ. Reka bentuk gambar yang indah dan kesan bunyi mencipta a

869 2024-05-04

Debu Ganjil: Damila

Pengenalan permainan "Earth: Damira" "Earth: Damira" ialah permainan pertahanan menara otaku fiksyen sains cahaya asing 3D penuh yang menarik. Dalam permainan ini, pemain akan memainkan peranan sebagai kapten Atum, memikul tugas penting untuk meneruskan harapan umat manusia, mengetuai sekumpulan gadis "baru lahir" yang penuh bertenaga dan bertenaga untuk menjejakkan kaki di planet misteri Damira untuk meneroka. planet asing hijau ini. Dengan tetapan sci-fi yang unik dan grafik 3D yang indah, permainan ini memberikan pemain dunia asing yang penuh dengan perkara yang tidak diketahui dan cabaran. Di tanah misteri ini, pemain perlu memimpin gadis-gadis untuk membina pertahanan yang kuat untuk menentang ancaman daripada bintang asing Pada masa yang sama, mereka perlu

254 2024-05-03

Perjalanan Muda ke Barat 2

"Journey to the West 2" Pengenalan Permainan Melangkah ke dunia "Journey to the West 2" adalah untuk melangkah ke dalam pengembaraan punk industri yang hebat dan fantasi yang penuh dengan daya tarikan oriental. Sebagai karya terbaharu siri kad juvana, permainan ini menyepadukan dengan sempurna elemen trend negara dengan gaya punk, menghadirkan pemain dengan dunia Journey to the West yang tidak pernah berlaku sebelum ini. Pertama sekali, gaya permainan adalah unik. Pereka bentuk dengan bijak menggabungkan teknik lukisan dan cetakan Cina tradisional dengan unsur punk moden, menjadikan setiap watak dan setiap adegan penuh dengan daya tarikan oriental yang kuat dan suasana punk avant-garde. Pemain seolah-olah berada dalam dunia yang menggabungkan klasik dan moden, timur dan

951 2024-05-03

24 jamPapan pendahulu membaca

Lagi>

Tutorial Terkini

[Web front-end] Permulaan pantas Node.js

Koleksi lengkap kursus timbunan penuh pembangunan web asing

1679 2024-04-24
Gunakan GraphQL praktikal bahasa

1951 2024-04-19
Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah

3378 2024-04-18
Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam

2907 2024-04-10
Bermula dengan MySQL (Teacher mosh)

1772 2024-04-07
Mock.js |. Axios.js |

2586 2024-03-29

CSS3 kesan khas kucing tergantung pada rentetan berayun animasi kiri dan kanan

CSS3 kesan khas kucing tergantung pada rentetan berayun animasi kiri dan kanan ialah kesan hayunan animasi yang dibuat dengan CSS3

<kepala>
<meta charset="utf-8">
<tajuk>css3猫挂在线球上左右摇摆动画特效</title>

<gaya>
.semua balutan {
-webkit-animasi: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
animasi: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
}

.semua {
atas: 10rem;
kiri: calc(50% - 2.5rem);
jawatan: mutlak;
lebar: 5rem;
tinggi: 5rem;
-webkit-transform-asal: pusat -20rem;
transform-asal: pusat -20rem;
-webkit-animasi: hayun 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
animasi: hayun 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
}
.semua:sebelum {
tinggi: 20rem;
lebar: 2px;
warna latar belakang: #DB242A;
kiri: calc(50% - 1px);
bawah: 20rem;
}

.benang {
jawatan: mutlak;
atas: 0;
kiri: 0;
lebar: 80px;
ketinggian: 80px;
jejari sempadan: 50%;
imej latar belakang: -webkit-radial-gradient(kiri atas, bulatan, #e97c7f, #db242a 50%, #af1d22);
imej latar belakang: radial-gradient(bulatan di sebelah kiri atas, #e97c7f, #db242a 50%, #af1d22);
indeks z: 1;
}
.benang:sebelum, .benang:selepas {
jawatan: mutlak;
lebar: 20px;
ketinggian: 20px;
jejari sempadan: 50%;
warna latar belakang: putih;
atas: -1px;
}
.benang:sebelum {
kiri: calc(50% + 7px);
warna latar belakang: #b1bce6;
}
.benang:selepas {
kanan: calc(50% + 7px);
warna latar belakang: #D5E8F8;
}

.balut kucing {
jawatan: mutlak;
atas: 0;
kiri: calc(50% - 45px);
lebar: 90px;
ketinggian: 130px;
-webkit-animasi: ayunan undur 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
animasi: ayunan undur 7s cubic-bezier(0.5, 0, 0.5, 1) tak terhingga kedua-duanya;
-webkit-transform-asal: tengah atas;
transform-asal: tengah atas;
}

.kucing {
jawatan: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
ketinggian: 100%;
-webkit-animasi: hayun 7s 0.2s tak terhingga kedua-duanya;
animasi: hayun 7s 0.2s tak terhingga kedua-duanya;
-webkit-transform-asal: tengah atas;
transform-origin: tengah atas;
}

.cat-atas {
jawatan: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
ketinggian: 100%;
-webkit-transform-asal: tengah atas;
transform-asal: tengah atas;
indeks z: 1;
}
.cat-atas .cat-leg {
jawatan: mutlak;
lebar: 20px;
ketinggian: 100%;
warna latar belakang: putih;
indeks-z: -1;
imej latar belakang: -webkit-linear-gradient(kiri, #D5E8F8, #D5E8F8 20%, #8B9BD9);
imej latar belakang: kecerunan linear(ke kanan, #D5E8F8, #D5E8F8 20%, #8B9BD9);
}
.cat-atas .cat-leg:nth-child(1) {
sempadan-atas-kiri-jejari: 100px;
kiri: 10px;
}
.cat-atas .cat-leg:nth-child(1):selepas {
kiri: 50%;
}
.cat-atas .cat-leg:nth-child(2) {
sempadan-atas-kiri-radius: 0;
jejari sempadan-atas-kanan: 100px;
kanan: 10px;
}
.cat-atas .cat-leg:nth-child(2):selepas {
kanan: 50%;
}

.cat-lower-wrap {
ketinggian: 90%;
lebar: 100%;
jawatan: mutlak;
atas: 100%;
lebar: 75px;
kiri: calc(50% - 37.5px);
-webkit-animasi: ayunan undur 7s 0.2s tak terhingga kedua-duanya;
animasi: ayunan undur 7s 0.2s tak terhingga kedua-duanya;
-webkit-transform-asal: tengah atas;
transform-asal: tengah atas;
}

.cat-lower {
jawatan: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
ketinggian: 100%;
-webkit-animasi: hayun 7s 0.5s tak terhingga kedua-duanya;
animasi: hayun 7s 0.5s tak terhingga kedua-duanya;
-webkit-transform-asal: tengah atas;
transform-asal: tengah atas;
}
.cat-lower:selepas {
jawatan: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
ketinggian: 100%;
jejari sempadan: 100px;
imej latar belakang: -webkit-radial-gradient(10px 50px, bulatan, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
imej latar belakang: radial-gradient(bulatan pada 10px 50px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
indeks z: 1;
}
.cat-lower .cat-leg, .cat-lower .cat-paw {
indeks-z: -1;
jawatan: mutlak;
ketinggian: 20px;
lebar: 20px;
-webkit-animasi: hayun-kaki 7s 0.3s tak terhingga kedua-duanya;
animasi: kaki hayun 7s 0.3s tak terhingga kedua-duanya;
indeks z: 1;
-webkit-transform-asal: tengah atas;
transform-asal: tengah atas;
sempadan-atas-kiri-radius: 20px;
sempadan-atas-kanan-jejari: 20px;
imej latar belakang: -webkit-linear-gradient(kiri, putih, #D5E8F8, #8B9BD9);
imej latar belakang: kecerunan linear(ke kanan, putih, #D5E8F8, #8B9BD9);
}
.cat-lower > .kaki kucing {
bawah: 20px;
}
.cat-lower > .kaki-kucing .kaki-kucing {
atas: 25%;
}
.cat-lower > .kaki-kucing + .kaki-kucing {
kanan: 0;
}
.cat-lower .cat-paw {
atas: 50%;
jejari sempadan: 50%;
warna latar belakang: #fff;
}
.cat-lower .cat-tail {
jawatan: mutlak;
ketinggian: 15px;
lebar: 10px;
-webkit-animasi: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
animasi: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
-webkit-transform-asal: tengah atas;
transform-asal: tengah atas;
indeks z: 0;
imej latar belakang: -webkit-linear-gradient(kiri, putih, #D5E8F8, #8B9BD9);
imej latar belakang: kecerunan linear(ke kanan, putih, #D5E8F8, #8B9BD9);
sempadan-bawah-kiri-radius: 10px;
sempadan-bawah-kanan-jejari: 10px;
}
.cat-lower .cat-tail > .ekor kucing {
atas: 50%;
}
.cat-lower > .ekor kucing {
kiri: calc(50% - 5px);
atas: 95%;
}

.kepala kucing {
lebar: 90px;
ketinggian: 90px;
imej latar belakang: -webkit-radial-gradient(10px 10px, bulatan, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
imej latar belakang: radial-gradient(bulatan pada 10px 10px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
jejari sempadan: 50%;
atas: calc(100% - 45px);
}

.muka kucing {
jawatan: mutlak;
atas: 0;
kiri: 0;
ketinggian: 100%;
lebar: 100%;
-webkit-animasi: hadapi 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
animasi: hadapi 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-perspektif webkit: 100px;
perspektif: 100px;
}

.kucing-telinga {
jawatan: mutlak;
atas: 0;
kiri: 0;
ketinggian: 50%;
lebar: 100%;
indeks-z: -1;
}

.kucing-telinga {
lebar: 20px;
ketinggian: 100%;
jawatan: mutlak;
jejari sempadan: 5px;
atas: -10px;
}
.kucing-telinga:anak pertama {
kiri: 0;
-webkit-transform-origin: kiri atas;
transform-origin: kiri atas;
-webkit-transform: skewY(40deg);
transform: condong(40deg);
warna latar belakang: putih;
}
.kucing telinga:anak pertama:sebelum {
kiri: 0;
jejari sempadan atas kanan: 50%;
sempadan-bawah-kanan-jejari: 50%;
warna latar belakang: #D7EBFB;
}
.kucing-telinga:anak-terakhir {
kanan: 0;
-webkit-transform-origin: atas kanan;
transform-origin: atas kanan;
-webkit-transform: skewY(-40deg);
transform: condong(-40deg);
warna latar belakang: #d1e6f7;
}
.cat-ear:last-child:sebelum {
kanan: 0;
sempadan-atas-kiri-radius: 50%;
sempadan-bawah-kiri-radius: 50%;
warna latar belakang: #e0f0fc;
}
.cat-ear:sebelum {
lebar: 60%;
ketinggian: 100%;
atas: 10px;
jawatan: mutlak;
warna latar belakang: #fff;
}

.mata kucing {
jawatan: mutlak;
atas: 50%;
lebar: 100%;
ketinggian: 6px;
-webkit-animasi: blink 7s step-end infinite both;
animasi: blink 7s step-end infinite both;
}
.cat-eyes:sebelum ini, .cat-eyes:selepas {
jawatan: mutlak;
ketinggian: 6px;
lebar: 6px;
jejari sempadan: 50%;
warna latar belakang: #4B4D75;
}
.cat-eyes:sebelum {
kiri: 20px;
}
.cat-eyes:selepas {
kanan: 20px;
}

.mulut kucing {
jawatan: mutlak;
lebar: 12px;
ketinggian: 8px;
warna latar belakang: #4B4D75;
atas: 60%;
kiri: calc(50% - 6px);
sempadan-atas-kiri-radius: 50% 30%;
jejari sempadan atas kanan: 50% 30%;
sempadan-bawah-kiri-radius: 50% 70%;
sempadan-bawah-kanan-jejari: 50% 70%;
-webkit-transform: translateZ(10px);
transform: translateZ(10px);
}
.mulut kucing:sebelum, .mulut kucing:selepas {
jawatan: mutlak;
lebar: 90%;
ketinggian: 100%;
sempadan: 2px pepejal #9FA2CB;
atas: 80%;
jejari sempadan: 100px;
warna atas sempadan: lutsinar;
indeks-z: -1;
}
.mulut kucing:sebelum {
warna sempadan-kiri: lutsinar;
kanan: calc(50% - 1px);
-webkit-transform-origin: atas kanan;
transform-origin: atas kanan;
-webkit-transform: rotate(10deg);
transform: putar(10deg);
}
.mulut kucing:selepas {
warna sempadan-kanan: lutsinar;
kiri: calc(50% - 1px);
-webkit-transform-origin: kiri atas;
transform-origin: kiri atas;
-webkit-transform: putar(-10deg);
transform: putar(-10deg);
}

.kumis kucing {
lebar: 50%;
ketinggian: 8px;
jawatan: mutlak;
bawah: 25%;
kiri: 25%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-perspektif webkit: 60px;
perspektif: 60px;
}
.kumis-kucing:sebelum ini, .kumis-kucing:selepas {
jawatan: mutlak;
ketinggian: 100%;
lebar: 30%;
sempadan: 2px pepejal #9FA2CB;
sempadan-kiri: tiada;
sempadan-kanan: tiada;
}
.kumis-kucing:sebelum {
kanan: 100%;
-webkit-transform-asal: tengah kanan;
transform-asal: tengah kanan;
-webkit-transform: rotateY(70deg) rotateZ(-10deg);
transform: rotateY(70deg) rotateZ(-10deg);
}
.kumis-kucing:selepas {
kiri: 100%;
-webkit-transform-asal: tengah kiri;
transform-asal: tengah kiri;
-webkit-transform: rotateY(-70deg) rotateZ(10deg);
transform: rotateY(-70deg) rotateZ(10deg);
}

@-webkit-keyframes bob {
0% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
6.25% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
12.5% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
18.75% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
25% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
31.25% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
37.5% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
43.75% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
50% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
56.25% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
62.5% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
68.75% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
75% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
81.25% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
87.5% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
93.75% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
100% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
}

@keyframes bob {
0% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
6.25% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
12.5% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
18.75% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
25% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
31.25% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
37.5% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
43.75% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
50% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
56.25% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
62.5% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
68.75% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
75% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
81.25% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
87.5% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
93.75% {
-webkit-transform: translateY(-0.4rem);
transform: translateY(-0.4rem);
}
100% {
-webkit-transform: translateY(0.4rem);
transform: translateY(0.4rem);
}
}
@-webkit-keyframes berayun {
0% {
-webkit-transform: rotate(5deg);
transform: putar(5deg);
}
12.5% {
-webkit-transform: putar(-10deg);
transform: putar(-10deg);
}
25% {
-webkit-transform: rotate(10deg);
transform: putar(10deg);
}
37.5% {
-webkit-transform: putar(-15deg);
transform: putar(-15deg);
}
50% {
-webkit-transform: rotate(23deg);
transform: putar(23deg);
}
62.5% {
-webkit-transform: rotate(-23deg);
transform: putar(-23deg);
}
75% {
-webkit-transform: rotate(15deg);
transform: putar(15deg);
}
87.5% {
-webkit-transform: putar(-10deg);
transform: putar(-10deg);
}
100% {
-webkit-transform: rotate(5deg);
transform: putar(5deg);
}
}
@keyframes hayun {
0% {
-webkit-transform: rotate(5deg);
transform: putar(5deg);
}
12.5% {
-webkit-transform: putar(-10deg);
transform: putar(-10deg);
}
25% {
-webkit-transform: rotate(10deg);
transform: putar(10deg);
}
37.5% {
-webkit-transform: putar(-15deg);
transform: putar(-15deg);
}
50% {
-webkit-transform: rotate(23deg);
transform: putar(23deg);
}
62.5% {
-webkit-transform: rotate(-23deg);
transform: putar(-23deg);
}
75% {
-webkit-transform: rotate(15deg);
transform: putar(15deg);
}
87.5% {
-webkit-transform: putar(-10deg);
transform: putar(-10deg);
}
100% {
-webkit-transform: rotate(5deg);
transform: putar(5deg);
}
}
@-webkit-keyframes hayun-kaki {
0% {
-webkit-transform: rotate(0.5deg);
transform: putar(0.5deg);
}
12.5% {
-webkit-transform: rotate(-1deg);
transform: putar(-1deg);
}
25% {
-webkit-transform: rotate(1deg);
transform: putar(1deg);
}
37.5% {
-webkit-transform: putar(-1.5deg);
transform: putar(-1.5deg);
}
50% {
-webkit-transform: rotate(2.3deg);
transform: putar(2.3deg);
}
62.5% {
-webkit-transform: rotate(-2.3deg);
transform: putar(-2.3deg);
}
75% {
-webkit-transform: rotate(1.5deg);
transform: putar(1.5deg);
}
87.5% {
-webkit-transform: rotate(-1deg);
transform: putar(-1deg);
}
100% {
-webkit-transform: rotate(0.5deg);
transform: putar(0.5deg);
}
}
@keyframes kaki hayun {
0% {
-webkit-transform: rotate(0.5deg);
transform: putar(0.5deg);
}
12.5% {
-webkit-transform: rotate(-1deg);
transform: putar(-1deg);
}
25% {
-webkit-transform: rotate(1deg);
transform: putar(1deg);
}
37.5% {
-webkit-transform: putar(-1.5deg);
transform: putar(-1.5deg);
}
50% {
-webkit-transform: rotate(2.3deg);
transform: putar(2.3deg);
}
62.5% {
-webkit-transform: rotate(-2.3deg);
transform: putar(-2.3deg);
}
75% {
-webkit-transform: rotate(1.5deg);
transform: putar(1.5deg);
}
87.5% {
-webkit-transform: rotate(-1deg);
transform: putar(-1deg);
}
100% {
-webkit-transform: rotate(0.5deg);
transform: putar(0.5deg);
}
}
@-webkit-keyframes swing-tail {
0% {
-webkit-transform: rotate(-2deg);
transform: putar(-2deg);
}
12.5% {
-webkit-transform: rotate(4deg);
transform: putar(4deg);
}
25% {
-webkit-transform: rotate(-4deg);
transform: putar(-4deg);
}
37.5% {
-webkit-transform: rotate(6deg);
transform: putar(6deg);
}
50% {
-webkit-transform: rotate(-9.2deg);
transform: putar(-9.2deg);
}
62.5% {
-webkit-transform: rotate(9.2deg);
transform: putar(9.2deg);
}
75% {
-webkit-transform: rotate(-6deg);
transform: putar(-6deg);
}
87.5% {
-webkit-transform: rotate(4deg);
transform: putar(4deg);
}
100% {
-webkit-transform: rotate(-2deg);
transform: putar(-2deg);
}
}
@keyframes swing-tail {
0% {
-webkit-transform: rotate(-2deg);
transform: putar(-2deg);
}
12.5% {
-webkit-transform: rotate(4deg);
transform: putar(4deg);
}
25% {
-webkit-transform: rotate(-4deg);
transform: putar(-4deg);
}
37.5% {
-webkit-transform: rotate(6deg);
transform: putar(6deg);
}
50% {
-webkit-transform: rotate(-9.2deg);
transform: putar(-9.2deg);
}
62.5% {
-webkit-transform: rotate(9.2deg);
transform: putar(9.2deg);
}
75% {
-webkit-transform: rotate(-6deg);
transform: putar(-6deg);
}
87.5% {
-webkit-transform: rotate(4deg);
transform: putar(4deg);
}
100% {
-webkit-transform: rotate(-2deg);
transform: putar(-2deg);
}
}
@-webkit-keyframes reverse-swing {
0% {
-webkit-transform: rotate(-5deg);
transform: putar(-5deg);
}
12.5% {
-webkit-transform: rotate(10deg);
transform: putar(10deg);
}
25% {
-webkit-transform: putar(-10deg);
transform: putar(-10deg);
}
37.5% {
-webkit-transform: rotate(15deg);
transform: putar(15deg);
}
50% {
-webkit-transform: rotate(-23deg);
transform: putar(-23deg);
}
62.5% {
-webkit-transform: rotate(23deg);
transform: putar(23deg);
}
75% {
-webkit-transform: putar(-15deg);
transform: putar(-15deg);
}
87.5% {
-webkit-transform: rotate(10deg);
transform: putar(10deg);
}
100% {
-webkit-transform: rotate(-5deg);
transform: putar(-5deg);
}
}
@keyframes ayunan terbalik {
0% {
-webkit-transform: rotate(-5deg);
transform: putar(-5deg);
}
12.5% {
-webkit-transform: rotate(10deg);
transform: putar(10deg);
}
25% {
-webkit-transform: putar(-10deg);
transform: putar(-10deg);
}
37.5% {
-webkit-transform: rotate(15deg);
transform: putar(15deg);
}
50% {
-webkit-transform: rotate(-23deg);
transform: putar(-23deg);
}
62.5% {
-webkit-transform: rotate(23deg);
transform: putar(23deg);
}
75% {
-webkit-transform: putar(-15deg);
transform: putar(-15deg);
}
87.5% {
-webkit-transform: rotate(10deg);
transform: putar(10deg);
}
100% {
-webkit-transform: rotate(-5deg);
transform: putar(-5deg);
}
}
@-webkit-keyframes menghadapi {
0% {
-webkit-transform: translateX(-2.5px);
transform: translateX(-2.5px);
}
12.5% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
25% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
37.5% {
-webkit-transform: translateX(7.5px);
transform: translateX(7.5px);
}
50% {
-webkit-transform: translateX(-11.5px);
transform: translateX(-11.5px);
}
62.5% {
-webkit-transform: translateX(11.5px);
transform: translateX(11.5px);
}
75% {
-webkit-transform: translateX(-7.5px);
transform: translateX(-7.5px);
}
87.5% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
100% {
-webkit-transform: translateX(-2.5px);
transform: translateX(-2.5px);
}
}
@keyframes muka {
0% {
-webkit-transform: translateX(-2.5px);
transform: translateX(-2.5px);
}
12.5% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
25% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
37.5% {
-webkit-transform: translateX(7.5px);
transform: translateX(7.5px);
}
50% {
-webkit-transform: translateX(-11.5px);
transform: translateX(-11.5px);
}
62.5% {
-webkit-transform: translateX(11.5px);
transform: translateX(11.5px);
}
75% {
-webkit-transform: translateX(-7.5px);
transform: translateX(-7.5px);
}
87.5% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
100% {
-webkit-transform: translateX(-2.5px);
transform: translateX(-2.5px);
}
}
@-webkit-keyframes fade-in {
daripada {
kelegapan: 0;
}
kepada {
kelegapan: 1;
}
}
@keyframes fade-in {
daripada {
kelegapan: 0;
}
kepada {
kelegapan: 1;
}
}
@-webkit-keyframes berkelip {
daripada, kepada, 10%, 25%, 80% {
-webkit-transform: skalaY(1);
transform: skalaY(1);
}
8%, 23%, 78% {
-webkit-transform: skalaY(0.1);
transform: skalaY(0.1);
}
}
@keyframes berkelip {
daripada, kepada, 10%, 25%, 80% {
-webkit-transform: skalaY(1);
transform: skalaY(1);
}
8%, 23%, 78% {
-webkit-transform: skalaY(0.1);
transform: skalaY(0.1);
}
}
badan, html {
ketinggian: 100%;
lebar: 100%;
jidar: 0;
pelapik: 0;
warna latar belakang: #1F1F3C;
limpahan: tersembunyi;
}

*, *:sebelum, *:selepas {
saiz kotak: kotak sempadan;
jawatan: saudara;
-fungsi-masa-animasi-webkit: cubic-bezier(0.5, 0, 0.5, 1);
fungsi pemasaan animasi: cubic-bezier(0.5, 0, 0.5, 1);
-mod-isi-animasi-webkit: kedua-duanya;
mod-isi-animasi: kedua-duanya;
}

*:sebelum, *:selepas {
kandungan: '';
paparan: blok;
}

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

Cadangan berkaitan

Pemalam HTML5 Happy Scratch Mudah Alih

Pemalam Happy Scratch HTML5 mudah alih ialah pemalam H5 Scratch mudah alih yang sesuai untuk aktiviti Double 12.

kesan khas html5

2024-02-29

Kertas HTML5 dilipat menjadi kesan khas animasi kotak hadiah

Kertas HTML5 yang dilipat menjadi kesan animasi kotak hadiah ialah kesan animasi hadiah Krismas yang dilaksanakan dalam CSS yang sesuai untuk Krismas atau sebarang cuti.

kesan khas html5

2024-02-29

Kesan khas pemain filem retro CSS3 tulen

Kesan khas pemain filem retro CSS3 tulen ialah pemain muzik filem mudah dan kesan khas pemain rakaman filem.

Kesan khas pemain

2024-02-29

Kod terapung tetingkap pemain video HTML5

Kod terapung tetingkap pemain video HTML5 ialah kod pemain video MP4 hitam dan cantik.

Kesan khas pemain

2024-02-29

Pemalam pop timbul halaman WinBox html5 ringan

Pemalam pop timbul halaman html5 WinBox yang ringan adalah sangat mudah dan mudah untuk dikendalikan Ia menyokong fungsi seperti memaksimumkan, meminimumkan, skrin penuh, menutup, mengalih dan membuka berbilang tetingkap.

kesan khas html5

2024-02-29

bar menu gelongsor gambar akordion jQuery

bar menu gelongsor gambar akordion jQuery ialah bar menu navigasi kesan gelongsor gambar akordion sejuk kesan khas.

kesan akordion

2024-02-29

Kod CSS3 tulen untuk mencipta menu navigasi lungsur turun merah

Kod CSS3 tulen untuk mencipta menu navigasi lungsur turun ialah atribut peralihan CSS3 tulen untuk mencipta menu navigasi merah Menu lungsur turun dikembangkan dengan menuding tetikus dan menyokong kod menu lungsur tiga peringkat.

Navigasi menu

2024-02-29

Gambar putaran roda tetikus HTML5 memaparkan kesan khas

Kesan paparan gambar putaran roda tetikus HTML5 ialah kesan khas halaman web yang membolehkan roda tetikus berputar dan klik untuk membesarkan gambar Anda boleh membesarkan gambar yang dipilih atau klik untuk memulihkannya ke kedudukan asal.

Gambar kesan khas

2024-02-29

Cadangan popular

jQuery+Html5 merealisasikan kod animasi pengakuan yang indah

jQuery+Html5 melaksanakan kod animasi pengakuan yang indah, kesan animasi yang hebat, yang mesti dimiliki oleh pengaturcara untuk mengaku!

Kesan khas lain

2017-02-14

Kod kesan khas js pengakuan romantik pasangan

Kod kesan khas JS untuk pengakuan romantis pasangan Kesan khas tersebut boleh digunakan pada laman web fotografi perkahwinan atau diletakkan di laman web peribadi Ia juga merupakan kesan khas yang disyorkan untuk dimuat turun.

Kesan khas lain

2017-02-08

Halaman log masuk sistem yang keren

kesan jQuery

2019-12-30

Kod sumber permainan panda melantun H5

HTML5 Mobile Panda juga merupakan kod sumber permainan yang gila. Perihalan permainan: Tekan dan tahan skrin untuk melaraskan kekuatan spring panda dan lompat ke tiang batu. Permainan berakhir jika anda jatuh ke dalam sungai.

kesan khas html5

2019-08-22

Kod sumber permainan bola bergolek H5 3D

Muat turun kod permainan mudah alih bergolek bola 3D HTML5 yang hebat. Pengenalan permainan: Bola berwarna bergolek, dan trek semasa bola berwarna dikawal dengan menyeretnya menggunakan tetikus atau skrin sentuh telefon bimbit. Ini ialah kod sumber permainan mudah alih yang ringkas dan mudah dikendalikan.

kesan khas html5

2019-08-26

Permainan menembak itik kanvas HTML5

kesan khas html5

2017-11-24

Artifak pengakuan cinta js mudah

Artifak pengakuan cinta js asli yang mudah

Kesan khas lain

2017-02-14

Kesan ekspresif animasi zarah html5 Bunker

Kod kesan khas ungkapan animasi zarah html5 Bunker, teks kesan khas animasi boleh ditukar dalam kod, anda boleh membuat halaman di mana anda boleh menyesuaikan input teks, ia sepatutnya sangat popular, kesan khas HTML5 ini sangat cantik.

Kesan khas lain

2017-02-14