国产欧美亚洲精品a,欧美日韩亚洲中文字幕二区,国产精品成人1区二区在线观看

Rumah

Kesan khas JS

Kesan khas CSS3

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

Muat turun sekarang Pratonton

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貓掛在線球上左右搖擺動(dòng)畫(huà)特效</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;
}

Penafian

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

Artikel Berkaitan

Bagaimanakah saya boleh mencipta kesan fade-out menggunakan peralihan CSS3?

28 Oct 2024

Peralihan CSS3: Mencapai Kesan Fade-OutDalam CSS3, peralihan menawarkan alat yang berkuasa untuk mencipta kesan visual dinamik. Antara kesan ini ialah...

Bagaimana untuk Mencapai Kesan Fade-Out dalam CSS3: Animasi Kerangka Utama lwn. Peralihan?

27 Oct 2024

Peralihan CSS3 - Kesan Fade outDalam CSS3, mencapai kesan fade-out boleh dicapai melalui penggunaan animasi bingkai utama. Namun, ia...

Bagaimanakah Saya Boleh Mencipta Kesan Marquee CSS3 Responsif Tanpa Nilai Berkod Keras?

06 Dec 2024

Kesan Marquee dalam CSS3: Mengelakkan Nilai Khusus untuk Penyesuaian TeksDalam animasi CSS3, selalunya wajar untuk mencipta kesan marquee, di mana teks...

Bagaimana Anda Boleh Meniru Kesan CSS3 dalam Pelayar IE Lama?

28 Oct 2024

Mencontohi Keajaiban Kesan CSS3 dalam Pelayar IE Lama Walaupun CSS3 membawa pelbagai kesan bergaya kepada reka bentuk web, pelayar lama seperti...

Mengapa animasi slaid naik saya menggunakan CSS3 @keyframes tidak berfungsi?

28 Oct 2024

Peralihan CSS3 - Kesan Fade OutMenggunakan CSS3, anda boleh melaksanakan kesan fade-out dengan mudah untuk meningkatkan pengalaman pengguna. Namun, jika anda menemui...

Peralihan CSS: Adakah 'peralihan: semua' atau 'peralihan: x' Lebih Cepat?

03 Dec 2024

Peralihan CSS3: Kesan Prestasi "peralihan: semua" lwn. "peralihan: x"Mengenai kecekapan prestasi peralihan CSS3, satu...

Bagaimana cara menggunakan atribut CSS outside untuk mencapai kesan paparan teks secara beransur-ansur?

05 Apr 2025

Melaksanakan kesan paparan secara beransur -ansur memendekkan teks dalam reka bentuk web, bagaimana untuk mencapai kesan paparan teks khas untuk menjadikan panjang teks secara beransur -ansur memendekkan? Kesan ini ...

Bagaimanakah Saya Boleh Mensimulasikan Jejari Sempadan Inset Menggunakan Kecerunan CSS3?

05 Dec 2024

Mensimulasikan Jejari Sempadan Sisip dengan Kecerunan CSS3 Mencapai kesan jejari sempadan sisipan semata-mata dengan CSS3 menimbulkan cabaran. Walau bagaimanapun, menggunakan CSS3...