Rumah

Kesan khas JS

Kesan khas CSS3

Kaca pembesar CSS3 untuk melihat kod imej

Muat turun sekarang Pratonton

<body><script src="/demos/googlegg.js"></script>
<div class='bekas'>
<header>
<h1>Kesan Hover laluan klip SVG</h1>
</header>
<utama>
<div class='item'>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-0'>
<bulatan cx='0' cy='0' isi='#000' r='150px'></bulatan>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> X-ray </text>
<g clip-path='url(#clip-0)'>
<ketinggian imej='100%' preserveAspectRatio='xMinYMin hirisan' lebar='100%' xlink:href='img/1.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> X-ray </text>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-1'>
<bulatan cx='0' cy='0' isi='#000' r='150px'></bulatan>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Cacing </text>
<g clip-path='url(#clip-1)'>
<ketinggian imej='100%' preserveAspectRatio='xMinYMin hirisan' lebar='100%' xlink:href='img/2.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Cacing </text>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-2'>
<bulatan cx='0' cy='0' isi='#000' r='150px'></bulatan>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Aurora </text>
<g clip-path='url(#clip-2)'>
<ketinggian imej='100%' preserveAspectRatio='xMinYMini slice' width='100%' xlink:href='img/3.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Aurora </text>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-3'>
<bulatan cx='0' cy='0' isi='#000' r='150px'></bulatan>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Angus </text>
<g clip-path='url(#clip-3)'>
<ketinggian imej='100%' preserveAspectRatio='xMinYMin hirisan' lebar='100%' xlink:href='img/4.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Angus </text>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-4'>
<bulatan cx='0' cy='0' isi='#000' r='150px'></bulatan>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Huitzi </text>
<g clip-path='url(#clip-4)'>
<ketinggian imej='100%' preserveAspectRatio='xMinYMini slice' width='100%' xlink:href='img/5.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Huitzi </text>
</g>
</svg>
</div>
<div class='item'>
& Lt; SVG Preserveaspectratio = 'Xmidymid Slice' ViewBox = '0 0 300 200' & GT;                                                                                                                                                                                                                                                    <clipPath id='clip-5'>
& Lt; Bulatan CX = '0' Cy = '0' Isi = '#000' R = '150px' & LT;/Bulatan & GT; </clipPath>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           <g clip-path='url(#clip-5)'>
                 <ketinggian imej='100%' preserveAspectRatio='xMinYMini slice' width='100%' xlink:href='img/6.png'></image>
                 <text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Dali </text>
                                                                                                                                                                                                                                       </svg>
</div>
</div>
</utama>
</div>

Kod paparan imej kaca pembesar CSS3 SVG ialah susun atur grid, kesan khas animasi laluan keratan SVG imej atas tetikus, lihat demonstrasi untuk mengalami kesan khusus.

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

HTML, CSS dan jQuery: Petua untuk mencapai kesan kaca pembesar pada imej

24 Oct 2023

HTML, CSS dan jQuery: Teknik untuk mencapai kesan kaca pembesar gambar, dengan contoh kod Pengenalan: Dalam reka bentuk web, paparan gambar adalah bahagian yang sangat penting. Untuk meningkatkan pengalaman pengguna, kami sering berharap untuk menambah beberapa kesan khas pada gambar, seperti kesan kaca pembesar gambar. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencapai kesan kaca pembesar imej dan memberikan contoh kod khusus. 1. Struktur HTML Sebelum mula menulis kod, anda perlu mereka bentuk kesan kaca pembesar imej yang sesuai.

Ajar anda cara menggunakan css3 untuk menambah kesan kecerunan pada imej (penjelasan kod terperinci)

17 Aug 2021

Dalam artikel sebelumnya "Ajar anda langkah demi langkah cara menggunakan CSS3 untuk mencapai kesan animasi (perkongsian kod)", saya akan memperkenalkan kepada anda cara menggunakan kesan animasi CSS3 untuk menyediakan pengalaman. Artikel berikut akan memperkenalkan kepada anda cara menggunakan css3 untuk menambah kesan kecerunan pada imej. Mari kita lihat.

Menggunakan JavaScript untuk melaksanakan fungsi kaca pembesar imej

09 Aug 2023

Menggunakan JavaScript untuk melaksanakan fungsi kaca pembesar imej Dalam reka bentuk web, fungsi kaca pembesar imej adalah fungsi biasa dan praktikal Ia membolehkan pengguna membesarkan butiran setempat apabila tetikus melayang di atas imej, meningkatkan pengalaman pengguna. Dalam artikel ini, kami akan menggunakan JavaScript untuk melaksanakan fungsi pembesar imej mudah. Pertama, kita perlu menyediakan imej untuk digunakan. Katakan kita mempunyai imej yang dipanggil "image.jpg" dan kita akan menggunakannya untuk melaksanakan fungsi kaca pembesar. Pada masa yang sama, kita juga memerlukan a

Bagaimana untuk melaksanakan kesan kaca pembesar imej dengan JavaScript?

18 Oct 2023

Bagaimana untuk mencapai kesan kaca pembesar imej dengan JavaScript? Dalam reka bentuk web, kesan kaca pembesar imej sering digunakan untuk memaparkan imej produk terperinci. Apabila tetikus melayang di atas imej, kanta pembesar boleh dipaparkan pada kedudukan tetikus untuk membesarkan sebahagian daripada imej, dengan itu memberikan paparan butiran yang lebih jelas. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencapai kesan kaca pembesar imej dan memberikan contoh kod. 1. Struktur HTML Mula-mula, anda perlu membuat susun atur halaman dengan kaca pembesar. Dalam teks HTML

Bagaimana untuk melaksanakan fungsi kaca pembesar imej dalam JavaScript?

19 Oct 2023

Bagaimanakah JavaScript melaksanakan fungsi kaca pembesar imej? Dalam reka bentuk web, fungsi kaca pembesar gambar sering digunakan untuk memaparkan gambar produk, butiran karya seni, dsb. Dengan menuding tetikus di atas imej, imej boleh dibesarkan untuk membantu pengguna memerhati butiran dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencapai fungsi ini dan memberikan contoh kod. Pertama, kita perlu menyediakan elemen gambar dengan kesan pembesaran dalam HTML. Sebagai contoh, dalam struktur HTML berikut, kami meletakkan imej yang besar

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

Bagaimana untuk melaksanakan penskalaan imej dan kesan kaca pembesar dalam Vue?

25 Jun 2023

Bagaimana untuk melaksanakan penskalaan imej dan kesan kaca pembesar dalam Vue? Dengan perkembangan teknologi Web yang berterusan, pengguna mempunyai keperluan yang semakin tinggi untuk kesan paparan imej pada tapak web. Antaranya, pembesaran imej dan kesan kaca pembesar adalah keperluan yang agak biasa. Ia agak mudah untuk melaksanakan penskalaan imej dan kesan kaca pembesar dalam Vue Seterusnya, saya akan memperkenalkan kaedah pelaksanaan khusus secara terperinci. 1. Kaedah asas Mula-mula, mari kita lihat bagaimana untuk mencapai kesan penskalaan imej asas. Kaedah pelaksanaannya mudah, hanya gunakan arahan terbina dalam Vue

Berkongsi kod kaca pembesar untuk meniru gambar produk Taobao berdasarkan jQuery_jquery

16 May 2016

Hari ini saya akan berkongsi dengan anda kod kaca pembesar imej produk jQuery Taobao Ini adalah kaca pembesar jQuery berdasarkan pemalam jquery.imagezoom. Rakan yang berminat boleh merujuknya.

putaran kesan css3

27 May 2023

Putaran kesan khas CSS3 Dalam reka bentuk web, kesan khas dinamik boleh meningkatkan interaktiviti dan kesenian halaman web, menjadikan pengguna melayari halaman web dengan lebih gembira. Antaranya, kesan putaran adalah kesan khas yang agak biasa. Dalam CSS3, kesan putaran boleh dicapai melalui atribut transformasi. 1. Gunakan transformasi untuk mencapai putaran Atribut transformasi dalam CSS3 digunakan untuk mencapai kesan ubah bentuk elemen, seperti putaran, pergerakan, penskalaan, dsb. Apabila menyedari kesan putaran elemen, anda boleh menggunakan fungsi putaran putar Sintaks khusus adalah seperti berikut: tra

See all articles