hujung hadapan web
tutorial css
Bagaimana untuk mencipta kesan animasi bintang menembak menggunakan CSS?
Bagaimana untuk mencipta kesan animasi bintang menembak menggunakan CSS?
Meteor kelihatan sebagai tanda kemesraan yang berkelip-kelip yang dihasilkan oleh menggigil kecil ini ketika ia berkelip-kelip merentasi langit malam yang sejuk. Kesan bintang jatuh ialah salah satu kesan latar belakang yang paling unik untuk tapak web tema gelap. Animasi bintang jatuh ialah contoh hebat skrin pemuatan yang boleh menarik perhatian anda untuk masa yang lama manakala bahan lain di tapak web dimuatkan. Kesan ini boleh dieksploitasi dalam pemuat halaman dan antara muka pengguna.
Dalam artikel ini, kita akan membincangkan cara untuk mencipta kesan animasi bintang jatuh menggunakan CSS. Untuk ini, kami akan menggunakan pelbagai sifat CSS seperti animasi, limpahan, penapis, transformasi, sifat anak ke-1, :sebelum dan :selepas pseudo-selectors.
Langkah untuk diikuti
Berikut ialah langkah-langkah untuk mencipta kesan animasi bintang jatuh -
Langkah 1 - Buat reka bentuk asas bintang menggunakan HTML. Buat elemen bahagian untuk langit dan sembilan
elemen untuk bintang.
Langkah 2 - Untuk membuat bintang jatuh pada 45 darjah, gunakan sifat Transform bagi elemen Bahagian.
Langkah 3 - Selaraskan elemen p mengikut keperluan anda.
Langkah 4 - Buat bola berbentuk donat menggunakan sifat-sifat seperti kedudukan dan sifat isi. Untuk memberi mereka bentuk bulat, gunakan sifat jejari sempadan.
Langkah 5 - Gunakan :sebelum dan :selepas pseudo-pemilih untuk menentukan kesan sebelum dan selepas bagi bintang
Langkah 6 - Gunakan sub-sifat ke-n untuk menambahkan animasi pada bintang. Menentukan kedudukan setiap anak ke-1.
Langkah 7 - Menggunakan @keyframes, nyatakan lebar kepala dan ekor bintang. Gunakan @-webkit-keyframes untuk mencipta kesan penangkapan.
Atribut yang digunakan
Kami menggunakan sifat CSS berikut -
:pemilih ke-anak(n)
:nth-child(n) ialah pemilih kelas pseudo CSS yang digunakan untuk memadankan elemen berdasarkan kedudukan mereka dalam kumpulan adik-beradik. Ia sepadan dengan semua elemen elemen anak ke-n. n boleh jadi nombor, kata kunci atau apa-apa formula.
Tatabahasa
element :nth-child(n){
Css declarations;
}
Parameter "n" dalam kurungan menunjukkan corak pemilihan atau pemadanan elemen. Ia mungkin tanda fungsi genap atau ganjil.
Nilai ganjil mewakili item dengan kedudukan ganjil dalam siri, seperti 1, 3, 5, dsb. Begitu juga, nilai genap mewakili item dengan nombor genap dalam siri, seperti 2, 4, 6, dan seterusnya.
Animasi CSS
Sifat animasi CSS membolehkan kami menukar pelbagai sifat gaya sesuatu elemen dalam selang masa tertentu, sekali gus memberikannya kesan animasi.
@keyframes digunakan untuk menentukan dengan tepat apa yang berlaku dalam animasi untuk tempoh tertentu. Ini dilakukan dengan mengisytiharkan sifat CSS untuk "bingkai" tertentu semasa animasi, dengan peratusan antara 0% (permulaan animasi) hingga 100% (akhir animasi).
Sifat penapis
Ia membolehkan pembangun menambahkan kesan visual seperti kelegapan, kabur dan ketepuan pada elemen HTML.
Tatabahasa
filter: none | blur()| drop-shadow() | invert() | opacity() | saturate() | sepia() | url() | brightness()| contrast();
Latar Belakang - Ia membolehkan kami menambah kesan visual pada elemen HTML di latar belakang.
Box-shadow - Ia membolehkan kami menambah bayang pada elemen HTML.
Transform - Sifat ini membolehkan kami menambah transformasi 2D atau 3D pada elemen. Ia membolehkan anda mengubah, memutar, menskala, bergerak, condong, dsb.
Contoh
<!DOCTYPE html>
<html>
<head>
<title> Shooting Star Animation Effect </title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow: hidden;
}
div{
position: absolute;
top: 0;
left: 0;
background: #000;
background-position-x: center;
background-size: cover;
width: 100%;
height: 100vh;
animation: background 68s linear infinite;
}
@keyframes background {
0%{ transform:scale(1);}
55%{ transform:scale(1.3);}
100%{ transform: scale(1);}
}
span{
position: absolute;
left: 50%;
top: 45%;
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
box-shadow: 0 1px 0 5px rgba(254, 254, 255, 0.2), 0 1px 0 7px rgba(245, 254, 255, 0.1), 0 1px 21px rgba(253, 253, 245, 1) ;
animation: anim 3s ease-in-out infinite;
}
span::before{
content: '';
width: 290px;
height: 2px;
position: absolute;
top: 53%;
transform: translateY(-45%);
background: linear-gradient(90deg, rgba(255, 255, 255, 1), transparent);
}
@keyframes anim {
0%{ transform: rotate(325deg) translateX(0); opacity: 1; }
40%{ opacity: 0.8; }
70%{ opacity: 1; }
100%{ transform: rotate(325deg) translateX(-1400px); opacity: 0; }
}
span:nth-child(1){
top: 0;
right: 0;
left: inherit;
animation-delay: 0 ;
animation-duration: 1s;
}
span:nth-child(2){
top: 0;
right: 70px;
left: inherit;
animation-delay: 0.3s;
animation-duration: 4s;
}
span:nth-child(3){
top: 70px;
right: 0px;
left: inherit;
animation-delay: 0.3s ;
animation-duration: 3s;
}
span:nth-child(4){
top: 0;
right: 170px;
left: initial;
animation-delay: 0.7s;
animation-duration: 3s;
}
</style>
</head>
<body>
<div>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
</div>
</body>
</html>
Kesimpulan
Dalam artikel ini, kami belajar cara mencipta kesan bintang jatuh menggunakan CSS. Memandangkan reka bentuk web telah bertambah baik dengan ketara, animasi dalam talian ialah alat penting yang digunakan oleh pembangun laman web untuk menarik khalayak yang lebih besar. Kebanyakan orang cuba menggunakannya dengan lebih kerap, bukan sahaja untuk mengisi halaman tetapi untuk menunjukkan cara halaman itu harus dibaca. Animasi digunakan untuk menunjukkan ralat borang, lokasi klik, meningkatkan kadar penukaran dan banyak lagi.
Animasi sering menarik perhatian pengguna, itulah sebabnya ia digunakan. Selain itu, animasi boleh digunakan untuk mengalihkan perhatian pengguna semasa kandungan sedang dimuatkan, memberikan gambaran bahawa ia dimuatkan dengan lebih pantas dan membolehkan mereka memerhatikan pergerakan atau kemajuan dengan segera.
Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan animasi bintang menembak menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1391
52
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress
Apr 02, 2025 am 04:27 AM
Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'?
Apr 05, 2025 pm 05:51 PM
Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...
