Rumah

Kesan khas JS

Kesan khas CSS3

Animasi angkasawan kesan khas CSS3

Muat turun sekarang Pratonton

Ini adalah pelaksanaan css3 tulen bagi kesan animasi jatuh angkasawan di angkasa

<gaya>
*{
jidar: 0;
pelapik: 0;
}
badan{
warna latar belakang: #102037;
limpahan: tersembunyi;
}
@-webkit-keyframes salji {
0% { kelegapan: 0; -webkit-transform: translateY(0px); 20%{ kelegapan: 1;}
100% { kelegapan: 1; -webkit-transform: translateY(650px); }
@keyframes salji {
0% { kelegapan: 0; -webkit-transform: translateY(0px); 20%{ kelegapan: 1;}
100% { kelegapan: 1; -webkit-transform: translateY(650px); }
@-webkit-keyframes angkasawan{
0%{
-webkit-transform: rotate(0deg);
transform: putar(0deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: putar(360deg);
}
}
.kotak-bintang1,
.kotak-bintang2,
.kotak-bintang3,
.box-of-star4{
lebar: 100%;
Jawatan: mutlak;
indeks z: 10;
kiri: 0;
-webkit-transform: translateY(650px);
transform: translateY(650px);
}
.kotak-bintang1{
-webkit-animasi: salji 5s linear tak terhingga;
}
.kotak-bintang2{
-webkit-animasi: salji 5s -1.64s linear tak terhingga;
}
.kotak-bintang3{
-webkit-animasi: salji 5s -2.30s linear tak terhingga;
}
.box-of-star4{
-webkit-animasi: salji 5s -3.30s linear tak terhingga;
}
.bintang{
lebar: 3px;
ketinggian: 3px;
jejari sempadan: 50%;
warna latar belakang: #FFF;
Jawatan: mutlak;
indeks z: 10;
Kelegapan: .7;
}
.star:sebelum{
kandungan: "";
lebar: 6px;
ketinggian: 6px;
jejari sempadan: 50%;
warna latar belakang: #FFF;
Jawatan: mutlak;
indeks z: 10;
atas: 40px;
kiri: 70px;
Kelegapan: .7;
}

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

CSS3 tulen mencipta kesan khas animasi di mana bayang sempadan merebak ke luar

25 Aug 2021

Dalam artikel sebelumnya "Ajar anda langkah demi langkah cara menggunakan CSS3 untuk melaksanakan kesan dinamik butang berlegar dan berkelip", kami memperkenalkan kaedah menggunakan CSS3 untuk menambah kesan dinamik pada butang dan mencapai kesan animasi bayang-bayang berlegar dan berkelip. Hari ini, artikel ini akan berkongsi dengan anda kesan animasi sempadan Mari lihat cara menggunakan CSS3 untuk mencapai kesan animasi bayang sempadan yang merebak ke luar.

Apakah alat kesan khas AI animasi?

28 Nov 2024

Alat kesan khas AI animasi dilahirkan untuk menyediakan juruanimasi dengan teknik yang hebat untuk meningkatkan kreativiti mereka dan menghasilkan animasi yang menarik. Alat ini termasuk: 1. DeepMotion (animasi aksara); animasi hidup) 6. DeepDreamGenerator (animasi abstrak);

Bagaimanakah Saya Boleh Mencipta Kesan Marquee Responsif dengan Animasi CSS3?

04 Dec 2024

Melaksanakan Kesan Marquee ResponsifDalam artikel ini, kami mendalami bidang mencipta kesan marquee responsif menggunakan animasi CSS3....

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...

Gunakan CSS3 untuk mencipta kesan animasi pemuatan praktikal (dua jenis)

27 Aug 2021

Dalam artikel sebelumnya "Buat imej latar belakang segi tiga yang sejuk menggunakan CSS3", kami memperkenalkan cara menggunakan CSS3 untuk mencipta latar belakang segitiga yang sejuk. Kali ini kami terus berkongsi kesan CSS3 dan melihat cara menggunakan CSS3 tulen untuk mencapai kesan animasi pemuatan Jika anda berminat, anda boleh mengetahui lebih lanjut~

Bagaimana untuk Mencipta Kesan Marquee Responsif dengan Animasi CSS3?

07 Dec 2024

Bagaimanakah saya boleh mencipta kesan marquee responsif dengan animasi CSS3? Animasi CSS3 menyediakan cara yang berkesan untuk menambah gerakan pada elemen tapak web anda....

Perkara yang perlu digunakan untuk mencapai kesan animasi css3

07 Jun 2022

Untuk mencapai kesan animasi CSS3: 1. Gunakan peraturan "@keyframes" dan atribut animasi untuk mencapai kesan animasi 2. Gunakan atribut peralihan untuk mencapai kesan animasi Sintaks ialah "elemen {transition: name name speed curve kelewatan}".

Adakah kesan animasi css3 mempunyai ubah bentuk?

28 Apr 2022

Kesan animasi dalam css3 mempunyai ubah bentuk; anda boleh menggunakan "animasi: atribut animasi @keyframes ..{..{transform: transformation attribute}}" untuk mencapai kesan animasi ubah bentuk Atribut animasi digunakan untuk menetapkan gaya animasi, dan atribut transform digunakan untuk menetapkan gaya ubah bentuk.