Membuat butang 3D yang diterangi secara langsung dengan CSS-tutorial css-php.cn

Membuat butang 3D yang diterangi secara langsung dengan CSS

Saya tidak pasti bagaimana saya terjumpa satu ini. Tetapi sesuatu membawa saya ke tweet ini:

Adakah ada yang melakukan interaksi kursor pencahayaan arah ini dengan CSS? pic.twitter.com/zll7sk6kw5
- Jed Bridges (@jedbridges) 1 Julai 2020

Dan, bagi saya, itu satu cabaran.

Reka bentuk butang adalah kemas. Tetapi saya tidak mahu melakukan salinan langsung. Sebaliknya, kami memutuskan untuk membuat butang "Twitter". Ideanya ialah kita membuat butang yang hampir telus dengan ikon sosial di atasnya. Dan kemudian ikon sosial itu memancarkan bayangan di bawah. Memindahkan tetikus kami melintasi butang menyinari cahaya di atasnya. Menekan butang menolaknya ke permukaan. Inilah hasil akhir:

Butang Twitter CSS Twitter 3D?
? https://t.co/qpfzewumey melalui @codepen pic.twitter.com/zwfwtpaixo
- jhey ?? (@jh3yy) 30 Januari 2021

Dalam artikel ini, kita akan melihat bagaimana anda boleh membuatnya juga. Perkara yang keren adalah, anda boleh menukar ikon kepada apa sahaja yang anda mahukan.

Takeaways Key

Gunakan CSS dan HTML untuk membuat butang 3D dengan kesan pencahayaan dinamik yang bertindak balas terhadap pergerakan kursor, meningkatkan interaksi pengguna.

Melaksanakan PUG untuk menjana ikon SVG dengan cekap untuk butang, membolehkan swap dan pelarasan mudah ke ikon yang berbeza menggunakan mixins.
mencapai kesan visual 3D dengan memanipulasi sifat CSS seperti `gaya transformasi: preserve-3D;` dan menggunakan pembolehubah untuk mengawal kedalaman dan perspektif.
Meningkatkan kebolehcapaian dengan menggunakan atribut `aria-hidden` dan memastikan bahawa unsur-unsur interaktif dapat dilihat melalui pembaca skrin.
Gunakan peralihan dan transformasi CSS untuk mensimulasikan interaksi fizikal seperti menekan butang, menambah realisme kepada pengalaman pengguna.
Gunakan JavaScript untuk kesan dinamik, seperti menggerakkan cahaya bersinar melintasi butang berdasarkan kedudukan kursor, dengan GSAP untuk animasi yang lancar.

Pendekatan pertama saya untuk mencipta sesuatu seperti ini adalah dengan perancah markup. Setelah pemeriksaan pertama, kita perlu menduplikasi ikon sosial yang digunakan. Dan cara yang kemas untuk melakukan ini adalah dengan menggunakan pug dan leverage mixins:

di sini, kami telah mencipta campuran untuk memberikan SVG ikon Twitter. Ini akan menjadikan ikon Twitter jika kita memanggilnya seperti:

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

Salin selepas log masuk

Melakukannya akan memberi kita ikon Twitter yang besar.

<span><span>+icon()</span>
</span>

Salin selepas log masuk

Lihat pen 1. Memberi ikon oleh SitePoint (@SitePoint) pada codepen.

Kerana set ikon sosial cenderung menggunakan kotak pandangan "0 0 24 24" yang sama, kita boleh membuat tajuk dan argumen jalan:

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

Salin selepas log masuk

maka ikon Twitter kami menjadi

<span><span>+icon()</span>
</span>

Salin selepas log masuk

Tetapi, kita boleh lulus kunci - dan kemudian mempunyai laluan yang disimpan dalam objek jika kita mempunyai banyak ikon yang kita mahu gunakan atau ulangi:

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

Salin selepas log masuk

Ini boleh menjadi cara yang kemas untuk membuat mixin ikon untuk digunakan semula. Ia agak berlebihan untuk contoh kami, tetapi perlu diperhatikan.

Sekarang, kita memerlukan beberapa markup untuk butang kami.

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

Salin selepas log masuk

Ia sentiasa baik untuk menyedari kebolehcapaian. Kami boleh menyemak butang apa yang kami berikan dengan menyemak panel aksesibiliti dalam alat pemaju penyemak imbas anda.

Membuat butang 3D yang diterangi secara langsung dengan CSS

Mungkin idea yang baik untuk meletakkan rentang untuk teks butang kami dan menyembunyikan ikon dengan Aria-Handden. Kami juga boleh menyembunyikan teks rentang sementara menjadikannya tersedia untuk pembaca skrin:

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>
<span><span>+icon('Twitter')</span>
</span>

Salin selepas log masuk

Kami mempunyai pilihan yang berbeza untuk memohon atribut yang tersembunyi Aria. Yang kami gunakan ialah menukar kod Mixin untuk memohon ARIA yang tersembunyi:

<span><span>.scene</span>
</span>  <span>button<span>.button</span>
</span>    <span>span<span>.button__shadow</span>
</span>      <span><span>+icon('Twitter')</span>
</span>    <span>span<span>.button__content</span>
</span>      <span><span>+icon('Twitter')</span>
</span>      <span>span<span>.button__shine</span>
</span>

Salin selepas log masuk

Satu lagi cara yang kemas dengan PUG adalah untuk melewati semua atribut ke mixin. Ini berguna dalam senario di mana kita hanya mahu lulus beberapa atribut melalui:

<span><span>.scene</span>
</span>  <span>button<span>.button</span>
</span>    <span>span<span>.button__shadow</span>
</span>      <span><span>+icon('Twitter')</span>
</span>    <span>span<span>.button__content</span>
</span>      <span>span<span>.button__text</span> Twitter
</span>      <span><span>+icon('Twitter')</span>
</span>      <span>span<span>.button__shine</span>
</span>

Salin selepas log masuk

Jika kita menyemak panel

aksesibiliti sekali lagi, butang kami hanya membaca "Twitter". Dan itulah yang kita mahu!

Gaya

Inilah bahagian yang anda datangi - bagaimana kita gaya perkara itu. Untuk memulakan, kami telah menjatuhkan ini dalam:

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "...path code"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' aria-hidden="true" xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>

Salin selepas log masuk

yang membolehkan kita membuat transformasi 3D yang kita perlukan untuk butang kami. Cuba tukar itu dalam demo akhir dan anda akan melihat bahawa semuanya pecah.

mari kita sembunyikan teks rentang dari mata kita. Kita boleh melakukan ini dalam banyak cara. Salah satu cara yang disyorkan untuk menyembunyikan elemen dari mata kita, tetapi bukan orang -orang dari ScreenReader, adalah menggunakan gaya ini:

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "...path code"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span><span>&attributes(attributes)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>

Salin selepas log masuk

Sebelum kita mula bekerja pada butang kami, kami akan memiringkan tempat kejadian. Kita boleh melakukan ini menggunakan transformasi. Di sini kita berantai untuk mendapatkannya ke kedudukan yang kita mahu. Saya menghabiskan sedikit masa bermain dengan nilai -nilai di sini di aliran langsung untuk mendekati yang asal:

<span>* {
</span>  <span>transform-style: preserve-3d;
</span><span>}
</span>

Salin selepas log masuk

Anda akan melihat pembolehubah saiz di sana juga. Kami akan memandu perkara -perkara tertentu untuk butang kami dengan pembolehubah CSS. Ini akan menjadikannya berguna untuk tinkering dengan nilai dan kesannya. Biasanya, kami akan meletakkannya di bawah skop yang mereka perlukan. Tetapi, untuk demo seperti ini, meletakkannya di bawah: akar di bahagian atas fail kami memudahkan kami bermain.

<span><span>.button__text</span> {
</span>  <span>position: absolute;
</span>  <span>width: 1px;
</span>  <span>height: 1px;
</span>  <span>padding: 0;
</span>  <span>margin: -1px;
</span>  <span>overflow: hidden;
</span>  <span>clip: rect(0, 0, 0, 0);
</span>  <span>white-space: nowrap;
</span>  <span>border-width: 0;
</span><span>}
</span>

Salin selepas log masuk

Ini adalah pembolehubah yang kami bekerjasama, dan mereka akan masuk akal ketika kami membina butang kami.

Butang

mari kita beralih ke butang! Elemen butang akan mengisi elemen tempat kejadian. Kita boleh menggunakan ukuran dan mengubah terus pada butang. Tetapi jika kita memperkenalkan butang dan elemen lain, kita perlu mengubah dan mengukur mereka semua. Ini adalah sesuatu yang perlu diperhatikan dengan CSS secara umum. Cuba buat elemen kontena anda menentukan susun atur:

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

Salin selepas log masuk

di sini kita melepaskan gaya butang. Dan itu memberi kita ini.

Lihat pen 9. Gaya Butang Strip oleh SitePoint (@SitePoint) pada codepen.

Seterusnya, kita perlu membuat titik permulaan yang sama untuk kandungan butang dan bayangan. Kita boleh melakukan ini dengan memberikan setiap elemen kedudukan mutlak. Kandungan akan mempunyai terjemahan 3D berdasarkan pembolehubah kedalaman yang kami tentukan sebelum:

<span><span>+icon()</span>
</span>

Salin selepas log masuk

Perhatikan bagaimana kami juga menggunakan pembolehubah -Radius juga.

Lihat pen 10. Beri kedalaman butang oleh SitePoint (@SitePoint) pada codepen.

Sukar untuk membezakan antara kedua -dua ikon pada peringkat ini. Dan kini masa yang baik untuk gaya mereka. Kami boleh memohon beberapa gaya ikon asas dan menggunakan pengisian scoped untuk setiap ikon SVG:

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

Salin selepas log masuk

Ia sampai di sana! Ikon tidak sama saiz pada masa ini, walaupun. Kami akan sampai kepada itu.

Lihat pen 11. Sapukan Isi Skop oleh SitePoint (@SitePoint) pada codepen.

mari kita dapatkan butang tekan di tempatnya. Bahagian ini benar -benar cepat mengintegrasikan:

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

Salin selepas log masuk

Itu sahaja! Menggunakan pembolehubah CSS scoped, kami mengatakan mengeluarkan terjemahan paksi z pada: aktif. Menambah peralihan ke transform berhenti dari seketika.

Lihat pen 12. Tekan: Aktif oleh SitePoint (@SitePoint) pada codepen.

Semua yang tersisa untuk dilakukan adalah gaya lapisan butang dan bersinar. Mari kita mulakan dengan bayang -bayang:

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

Salin selepas log masuk

Satu lagi gaya scoped di sini. Kami mengatakan bahawa apabila kita menekan butang, bayangan tidak lagi kabur. Dan untuk mengaburkan bayang -bayang, kami menggunakan harta penapis CSS dengan penapis kabur - nilai yang kami tentukan dalam pembolehubah CSS kami. Mainkan bermain dengan pembolehubah --blur dan lihat apa yang berlaku.

Lihat pen 13. Kurangkan kabur pada hover oleh SitePoint (@SitePoint) pada codepen.

Untuk lapisan kandungan, kami akan menggunakan warna latar belakang dan kemudian memohon penapis latar belakang. Sama seperti penapis, penapis latar belakang adalah cara bagi kita untuk menggunakan kesan visual kepada elemen. Kes penggunaan biasa pada masa ini adalah menggunakan kabur untuk "Glassmorphism":

<span><span>+icon()</span>
</span>

Salin selepas log masuk

Kami menggunakan nilai --blur dan gunakan peralihan untuk penapis latar belakang. Kerana cara kita merangkumi pembolehubah --blur kita: Aktif, kita mendapat peralihan hampir secara percuma. Mengapa limpahan: Tersembunyi? Kami menjangkakan bahawa Elemen Shine yang akan bergerak di sekitar butang. Kami tidak mahu ia mengembara di luar, walaupun.

Lihat pen 14. Lapisan Kandungan Styling oleh SitePoint (@SitePoint) pada codepen.

Dan sekarang, sekeping teka -teki terakhir - cahaya yang bersinar. Inilah yang menyebabkan ikon menjadi saiz yang berbeza. Kerana ia tidak mempunyai gaya, ia menjejaskan susun atur. Mari kita berikan beberapa gaya:

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

Salin selepas log masuk

kedudukan mutlak akan menyusun saiz ikon. Memohon jejari sempadan akan menjadikan pusingan perhatian. Dan kami menggunakan penapis sekali lagi untuk memberikan kesan cahaya tempat kabur. Anda akan melihat bahawa kami telah mengikat penapis kecerahan di hujungnya untuk mencerahkan perkara sedikit selepas mereka kabur.

Lihat pen 15. Styling Shine by SitePoint (@SitePoint) pada codepen.

menggunakan terjemahan 3D memastikan bahawa bersinar duduk di atas butang, yang akan dilakukannya. Dengan cara ini, tidak ada peluang untuk dipotong oleh Z-fighting dengan unsur-unsur lain.

Itu semua yang kita perlukan untuk gaya buat masa ini. Kini sudah tiba masanya untuk beberapa skrip.

skrip

Kami akan menggunakan Greensock di sini untuk kemudahan. Mereka mempunyai beberapa utiliti yang kemas untuk apa yang kita mahu. Tetapi, kita dapat mencapai hasil yang sama dengan vanila JavaScript. Kerana kita menggunakan skrip dengan jenis "modul", kita boleh mengambil kesempatan daripada Skypack.

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

Salin selepas log masuk

Dan sekarang kami sudah bersedia untuk memulakan tinkering. Kami mahu butang kami bertindak balas terhadap pergerakan penunjuk. Perkara pertama yang kita mahu ialah menterjemahkan bersinar seolah -olah ia mengikuti penunjuk kami. Yang kedua adalah untuk mengalihkan butang bergantung pada tempat penunjuk kami.

mari kita ambil unsur -unsur yang kita perlukan dan sediakan beberapa pendengar acara asas pada dokumen:

<span><span>+icon()</span>
</span>

Salin selepas log masuk

Cuba gerakkan penunjuk anda di dalam demo ini untuk melihat barang -barang berharga yang kami dapat kembali untuk x dan y:

Lihat pen 16. Mengambil Elemen dan Membuat Pendengar Acara oleh SitePoint (@SitePoint) pada codepen.

Ini adalah sedikit yang paling rumit. Kami memerlukan beberapa matematik untuk menyelesaikan kedudukan bersinar. Kami akan menterjemahkan bersinar selepas penetapan semula awalnya. Kita perlu mengemas kini gaya bersinar terlebih dahulu untuk menampung ini. Kami menggunakan pembolehubah CSS scoped --X dan --y. Kami memberi mereka kejatuhan -150 sehingga mereka akan ditembak apabila demo beban:

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

Salin selepas log masuk

Kemudian, dalam fungsi kemas kini kami, kami mengira kedudukan baru untuk bersinar. Kami mendasarkan ini pada peratusan saiz butang. Kami boleh mengira ini dengan menolak kedudukan butang dari kedudukan penunjuk kami. Kemudian kita membahagikannya dengan kedudukan. Untuk menyelesaikan, kalikan sebanyak 200 untuk mendapatkan peratusan:

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

Salin selepas log masuk

contohnya, pos_x:

ambil kedudukan penunjuk x.
tolak kedudukan butang x.
Bahagikan dengan lebar butang.
Multiply oleh 200.

Kami membiak dengan 200 kerana bersinar adalah separuh saiz butang. Bahagian ini adalah rumit kerana kami cuba menjejaki penunjuk dan memetakannya ke ruang 3D.

Untuk memohon kepada butang, kami boleh menetapkan pembolehubah CSS menggunakan GSAP.SET. Itulah kaedah GSAP yang berfungsi sebagai tween kedua sifar. Ia amat berguna untuk menetapkan nilai pada elemen:

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>
<span><span>+icon('Twitter')</span>
</span>

Salin selepas log masuk

Tetapi, jika kita mahu mengambil satu langkah lagi, kita boleh menggunakan QuickSetter dari GSAP, yang akan lebih baik untuk prestasi dalam senario dunia nyata di mana kita membuat banyak kemas kini:

<span><span>.scene</span>
</span>  <span>button<span>.button</span>
</span>    <span>span<span>.button__shadow</span>
</span>      <span><span>+icon('Twitter')</span>
</span>    <span>span<span>.button__content</span>
</span>      <span><span>+icon('Twitter')</span>
</span>      <span>span<span>.button__shine</span>
</span>

Salin selepas log masuk

yang menjadikan fungsi kemas kini kami kelihatan seperti ini:

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

Salin selepas log masuk

Ketepatan mengikuti penunjuk akan memerlukan lebih banyak pengiraan tepat. Mainkan dengan demo ini di mana limpahan pada butang kelihatan dan bersinar lebih menonjol. Anda dapat melihat bagaimana elemen bersinar kehilangan penjejakannya.

Lihat pen 17. Menerjemahkan Taman Permainan Shine oleh SitePoint (@SitePoint) pada codepen.

Demo ini meletakkan segala -galanya di mana ia sepatutnya.

Lihat pen 18. Menerjemahkan Shine oleh SitePoint (@SitePoint) pada codepen.

Ciri terakhir. Mari kita shifkan butang untuk sentuhan tambahan. Di sini, kami akan mendasarkan peralihan butang pada kedudukan penunjuk. Tetapi, kita akan mengehadkan pergerakannya. Untuk melakukan ini, kita boleh menggunakan utiliti GSAP yang lain. Kami akan menggunakan MapRange. Ini membolehkan kita memetakan satu set nilai kepada yang lain. Kami kemudian boleh lulus nilai dan mendapatkan nilai yang dipetakan semula.

Pertama, kita akan menentukan had untuk pergerakan. Ini akan menjadi peratusan saiz butang:

<span><span>+icon()</span>
</span>

Salin selepas log masuk

Sekarang, dalam fungsi kemas kini kami, kami dapat mengira peratusan peralihan. Kami melakukan ini dengan memetakan lebar tetingkap terhadap had. Dan kami memasukkan kedudukan penunjuk kami untuk mendapatkan peratusan yang dipetakan kembali:

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

Salin selepas log masuk

Di blok ini, kami memetakan julat 0 ke window.InnerWidth terhadap -10 hingga 10. Posisi penunjuk lulus X akan memberi kami nilai antara -10 dan 10 dan kemudian kami boleh memohon peralihan peratusan ke butang kami . Kami melakukan perkara yang sama untuk peralihan menegak dan ini memberi kita fungsi kemas kini seperti yang berikut:

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

Salin selepas log masuk

itu!

Begitulah cara anda membuat butang 3D lit berarah dengan CSS dan sedikit skrip. Perkara yang sejuk ialah kita boleh membuat perubahan dengan mudah.

Untuk demo akhir, saya telah menambah beberapa butiran tambahan dan menukar ikon. Anda mungkin mengenalinya.

Lihat pen 20. Butang SitePoint oleh SitePoint (@SitePoint) pada codepen.

seperti biasa, terima kasih kerana membaca. Ingin melihat lebih banyak lagi? Datanglah Cari Saya di Twitter atau lihat aliran langsung!

Soalan -soalan yang sering ditanya mengenai membuat butang 3D yang diterangi secara langsung dengan CSS

Bagaimana saya boleh membuat butang 3D menggunakan CSS yang berubah apabila diklik? Kelas pseudo ini digunakan untuk gaya elemen apabila ia diaktifkan oleh pengguna. Sebagai contoh, anda boleh menukar warna, saiz, atau kedudukan butang apabila ia diklik. Berikut adalah contoh mudah:

.button: aktif {
latar belakang warna: #3e8e41;
box-shadow: 0 5px #666; >}
Dalam contoh ini, warna latar belakang butang berubah menjadi warna hijau yang berbeza apabila diklik. Harta kotak bayang-bayang menambah kesan bayangan, dan sifat transformasi menggerakkan butang ke bawah. Butang 3D boleh dicapai menggunakan: Hover pseudo-class dalam CSS. Kelas pseudo ini digunakan untuk gaya elemen apabila penunjuk tetikus berada di atasnya. Anda boleh menukar warna, saiz, atau menambah bayangan ke butang apabila ia melayang. Inilah contoh mudah:

.button: hover {
latar belakang warna: #3e8e41;
box-shadow: 0 5px #666; Warna latar belakang butang berubah menjadi warna hijau yang berbeza apabila berlegar, dan kesan bayangan ditambah.

Bagaimana saya boleh membuat butang 3D saya responsif?

Pertanyaan dalam CSS. Pertanyaan media membolehkan anda menggunakan gaya yang berbeza untuk peranti atau saiz skrin yang berbeza. Sebagai contoh, anda boleh menukar saiz atau kedudukan butang bergantung pada saiz skrin. Berikut adalah contoh mudah:

@media skrin dan (max-width: 600px) {
.button {
lebar: 100%;
padding: 20px;
}

}

Dalam contoh ini, lebar butang ditetapkan kepada 100% dan padding meningkat apabila saiz skrin adalah 600px atau kurang. 🎜>

Menambah kesan peralihan ke butang 3D anda boleh dicapai menggunakan harta peralihan dalam CSS. Harta ini membolehkan anda menentukan kelajuan kesannya. Sebagai contoh, anda boleh membuat perubahan warna atau bayangan muncul secara beransur -ansur. Berikut adalah contoh mudah:

.button {
peralihan: latar belakang warna 0.5s mudah, box-shadow 0.5s mudah; Tukar secara beransur -ansur dalam tempoh 0.5 saat.

Bagaimana saya boleh membuat butang 3D dengan sudut bulat?

Mewujudkan butang 3D dengan sudut bulat melibatkan menggunakan harta radius sempadan di CSS. Harta ini membolehkan anda menambah sempadan bulat ke elemen. Sebagai contoh, anda boleh membuat bulat sudut butang. Berikut adalah contoh mudah:

.button {
Radius sempadan: 12px;
}
Dalam contoh ini, sudut butang dibulatkan dengan jejari 12px. > Bagaimanakah saya boleh membuat butang 3D dengan latar belakang kecerunan?

Membuat butang 3D dengan latar belakang kecerunan melibatkan menggunakan fungsi gradien linear dalam CSS. Fungsi ini membolehkan anda membuat kecerunan yang beralih antara dua atau lebih warna. Berikut adalah contoh mudah:

.button {
Latar Belakang: Linear-Gradient (ke kanan, #FF7F00, #FF5500); warna oren cahaya ke warna oren yang lebih gelap.

Bagaimana saya boleh membuat butang 3D dengan kesan bayangan? . Harta ini membolehkan anda menambah bayangan ke elemen. Sebagai contoh, anda boleh menambah bayangan ke butang untuk menjadikannya kelihatan 3D. Berikut adalah contoh mudah:

.button {

box-shadow: 0 5px 15px rgba (0,0,0,0.3); Shadow yang 5px di bawah butang dan mempunyai radius kabur 15px. Warna bayang-bayang adalah hitam separa telus.

Bagaimana saya boleh membuat butang 3D dengan sempadan? Harta ini membolehkan anda menambah sempadan ke elemen. Sebagai contoh, anda boleh menambah sempadan ke butang untuk membuatnya menonjol. Berikut adalah contoh mudah:

.button {
sempadan: 2px pepejal #ff5500;
}
Dalam contoh ini, butang mempunyai sempadan pepejal 2px dengan warna oren.

Bagaimana saya boleh membuat butang 3D dengan teks di dalam?

Membuat butang 3D dengan teks di dalam melibatkan menggunakan sifat teks dalam CSS. Ciri -ciri ini membolehkan anda gaya teks di dalam elemen. Sebagai contoh, anda boleh menukar warna, saiz, atau fon teks di dalam butang. Berikut adalah contoh mudah:

.button {
warna: #fff;
saiz font: 20px;
font-family: arial, sans-serif;
}

Dalam contoh ini, teks di dalam butang berwarna putih, mempunyai saiz 20px, dan menggunakan font Arial.

Bagaimana saya boleh membuat butang 3D yang serasi dengan semua pelayar? Awalan ini membolehkan anda menggunakan ciri CSS baru sebelum mereka disokong sepenuhnya dalam semua pelayar. Sebagai contoh, anda boleh menggunakan awalan -webkit -awalan untuk Chrome dan Safari, awalan -Moz -awalan untuk Firefox, dan -ms- awalan untuk Internet Explorer. Berikut adalah contoh mudah:

.button {
-webkit-transition: latar belakang warna 0.5s mudah, box-shadow 0.5s mudah; , box-shadow 0.5s mudah;
-ms-transition: latar belakang warna 0.5s mudah, box-shadow 0.5s mudah;
peralihan: latar belakang warna 0.5s mudah, box-shadow 0.5s mudah; 🎜>}
Dalam contoh ini, kesan peralihan bersesuaian dengan Chrome, Safari, Firefox, dan Internet Explorer.

Atas ialah kandungan terperinci Membuat butang 3D yang diterangi secara langsung dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!