Kesan animasi pelayaran laut CSS3
Kesan animasi pelayaran laut CSS3
Kesan animasi pelayaran laut css3 ialah animasi pelayaran kapal kesan khas pada laut yang dihasilkan melalui atribut animasi css3.
<svg retakon="1.1" class="ship" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x ="0px" y="0px"
viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
<bulatan id="sun" class="ship1" cx="520.8" cy="369.8" r="44.9"/>
<rect id="smoke1" x="173" y="225" width="18" height="10"/>
<rect id="smoke2" x="173" y="225" width="18" height="10"/>
<rect id="smoke3" x="173" y="225" width="18" height="10"/>
<rect id="smoke4" x="173" y="225" width="18" height="10"/>
<g id="ship">
<polyline class="ship3" points="261.4,274.1 266.7,246.9 272.1,274.3 261.4,274.1 "/>
<ellipse class="ship1" cx="267.1" cy="253.7" rx="13.6" ry="13.3"/>
<path class="ship3" d="M274.8,244c5.2,4.1,6,11.6,1.8,16.9c0,0-2.4-5.9-7.6-10c-5.2-4.1-11.1-4.7-11.1-4.7
C262.1,240.9,269.6,239.9,274.8,244z"/>
<polyline class="ship1" points="269.6,274.3 272.1,274.3 270.9,268.1 "/>
<poligon class="ship3" points="389.3,371.2 108.9,371.2 85.7,319.9 86.2,315.7 97.2,315.1 111.6,274.3 318.2,274.1
318.274.1
331.6,286.6 332,296.9 344.9,296.9 345.5,319 447.5,310.5 "/>
<path class="ship1" d="M294.6,274.2l23.6,0l0.2,12.6l13.2-0.1l0.4,10.2h12.9l1.4,23.7c0,0-79.5,6.6-123.1, 7.3
c-34.4,0.5,97.4-8.2,97.4-8.2l-0.7-20.2l-15.9-0.2l0.1-11j-9.8L294.6,274.2z"/>
<g>
<poligon class="ship1" points="195.1,275 167,275 172.2,238.8 189.9,238.8 "/>
<poligon class="ship3" points="189.3,275 167,275 172.2,238.8 187.5,238.8 "/>
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 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 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....
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 Semula Kesan Teg `` Menggunakan Hanya Animasi CSS3?
30 Nov 2024
Meniru Teg dengan Animasi CSS3Mencipta kesan teks berkelip tanpa JavaScript boleh dicapai menggunakan animasi CSS3. ini...
Buat Kesan Animasi Bar Kemajuan Pekeliling Menggunakan CSS3 dan SVG
04 Apr 2025
Anda boleh menggunakan CSS3 dan SVG untuk membuat kesan animasi bar kemajuan pekeliling. Langkah -langkah adalah seperti berikut: Buat elemen SVG dan tentukan jalan bulat; Tetapkan gaya garis putus -putus untuk laluan bulat; Gunakan animasi CSS3 untuk mengawal offset garis putus -putus; Tetapkan peratusan kemajuan dengan menyesuaikan offset awal garis putus -putus.
Bagaimanakah Saya Boleh Mencipta Semula Kesan Teg `` Menggunakan Hanya Animasi CSS3?
28 Nov 2024
Cara Mensimulasikan Teg Menggunakan Animasi CSS3Dalam bidang pembangunan web, teg pernah menjadi alat yang popular untuk...
Bagaimanakah Saya Boleh Mencipta Kesan Teks Berkelip Klasik Menggunakan Hanya Animasi CSS3?
29 Nov 2024
Menghasilkan Kesan Berkelip Klasik dengan Animasi CSS3Timbul persoalan: bagaimana untuk mencipta kesan teks berkelip, mengingatkan zaman dahulu...
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...
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...
Alat panas
Teks CSS digabungkan menjadi kesan khas animasi berbentuk hati
Teks CSS digabungkan menjadi kesan khas animasi berbentuk hati
Kesan khas animasi bunga ekspresi SVG CSS3
Kesan khas animasi bunga pengakuan SS3 SVG ialah kesan khas animasi Hari Valentine.
Laman web pusat beli-belah CSS biasanya menggunakan kod menu lungsur turun kategori kiri
Laman web pusat beli-belah CSS biasanya menggunakan kod menu lungsur turun kategori kiri
jQuery+CSS3 Kesan cinta Hari Valentine
jQuery+CSS3 Kesan khas cinta Hari Valentine ialah kesan khas animasi jantung berayun gantung Hari Valentine.
css3 sudu mencedok pulut bebola animasi kesan khas
Semangkuk ekspresi bebola pulut comel, sudu mencedok bebola pulut kesan khas animasi