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

HTML5 css3 bar kemajuan animasi kod kesan khas [disyorkan]_html5 kemahiran tutorial

16 May 2016

Editor di bawah akan berkongsi dengan anda kod kesan khas animasi hitung detik css3 HTML5 css3 [disyorkan]. Semoga ia membantu semua orang. Mari ikuti editor dan lihat.

Contoh terperinci kesan flop 3D kesan khas css3

16 May 2016

Artikel ini terutamanya memperkenalkan kesan flop 3D kesan khas CSS3 Ia mempunyai nilai rujukan tertentu Rakan-rakan yang berminat boleh merujuknya.

Cara mahir menggunakan kesan khas CSS3 untuk meningkatkan pengalaman pengguna halaman web

09 Sep 2023

Cara menggunakan kesan khas CSS3 dengan mahir untuk meningkatkan pengalaman pengguna laman web Dengan perkembangan Internet, reka bentuk web dan pengalaman pengguna telah menjadi pautan penting dalam pembangunan laman web. Aplikasi kesan khas CSS3 boleh menambah dinamik dan kesan visual pada halaman web dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan beberapa kesan khas CSS3 biasa dan contoh kodnya untuk membantu pembangun menjadi lebih mahir dalam menggunakan kesan khas CSS3 dan meningkatkan pengalaman pengguna halaman web. Kesan peralihan (Peralihan) Kesan peralihan ialah salah satu kesan khas yang paling asas dalam CSS3 Dengan menukar atribut

Ubah bentuk CSS3 dan kesan animasi effect_form kesan khas

16 May 2016

Artikel ini terutamanya memperkenalkan kesan ubah bentuk dan animasi CSS3 animasi CSS3 terutamanya menggunakan tiga atribut: transformasi, peralihan dan animasi Rakan yang memerlukan boleh merujuk kepada perkara berikut

contoh kesan khas animasi jQuery tutorial_jquery

16 May 2016

Artikel ini terutamanya memperkenalkan kesan khas animasi jQuery, dan menerangkan secara terperinci kaedah pelaksanaan kesan khas animasi jQuery Ia sangat praktikal. Rakan yang memerlukannya boleh merujuknya.

Bagaimana untuk menambah kesan khas animasi kepada toonme Bagaimana untuk menambah kesan khas animasi kepada toonme

14 Jun 2024

Cara menambah kesan khas animasi pada toonme (cara menambah kesan khas animasi pada toonme), cara mengendalikannya secara khusus, ramai netizen tidak tahu, ikut editor untuk mengetahui. Buka APP alat dan pada halaman templat, pilih templat kesan khas yang ingin anda buat. Dalam templat, pilih foto yang ingin anda buat. Klik ikon ini untuk bekerja dengan imej. Pada halaman hasil, klik tanda tambah, dan kemudian klik Animasi. Pilih kesan animasi pilihan anda dan klik "Gunakan" untuk menyelesaikannya.

jQuery CSS3 menyedari kesan khas daun_jquery yang jatuh

16 May 2016

Artikel ini berkongsi dengan anda sekeping kod yang menggunakan jQuery CSS3 untuk mencapai kesan khas daun yang jatuh Kesannya sangat bagus. Saya harap anda akan menyukainya.

2014 HTML5/CSS3 kesan animasi popular TOP10_jquery

16 May 2016

Artikel ini meringkaskan 10 kesan khas animasi HTML5/css3 yang popular di tapak ini tahun ini, dan melampirkan alamat demo dan alamat muat turun untuk perbandingan dan digunakan oleh rakan yang memerlukan.

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.

See all articles