Mencipta semula kesan butang gelongsor netlify ' s

Butang muat turun di laman web rasmi Netlify adalah mudah dan elegan, menarik mata tanpa tiba -tiba, dan kesan interaktifnya sangat mengagumkan: apabila tetikus berlegar, butang mengembang dan memaparkan perkataan "muat turun". Saya perhatikan sedikit perbezaan yang dipamerkan di bawah Safari, yang mencetuskan minat saya untuk meneroka bagaimana ia dilaksanakan. Jadi saya cuba menghasilkan semula kesan dan mengoptimumkan jarak.

Teknologi terasnya terletak pada empat aspek:

• Gunakan atribut left untuk mengawal paparan dan menyembunyikan tag "muat turun".
• Gunakan harta padding dalam keadaan melayang butang untuk memberi ruang untuk tag "muat turun".
• Mengisytiharkan scale(1, 1) apabila butang dilegakan, memastikan kandungan tetap utuh semasa bergerak.
• Gunakan atribut transition untuk menghidupkan padding , latar belakang background-position kedudukan dan transform atribut butang untuk mencapai kesan animasi yang lancar.

Berikut adalah contoh kod yang tidak termasuk gaya untuk menunjukkan prinsipnya dengan lebih jelas:

Sekiranya sukar untuk memahami bagaimana ia berfungsi, imej berikut menunjukkan bagaimana tag "muat turun" tersembunyi dari butang melalui overflow: hidden , dan bagaimana ia dapat ditolak apabila tetikus melayang.

Sembunyikannya dengan menetapkan nilai left negatif untuk ikon dan label "muat turun", dan tetapkan semula ke nilai positif apabila keseluruhan butang dilegakan.

 /* Status lalai*/
.button {
    Latar Belakang: 
      #f6bc00 
      URL (Data: Imej/SVG XML; BASE64, ...)
      tiada pusat -12px pusat;
    Limpahan: Tersembunyi;
}

.Button Span: Nth-Child (1) {
  Kedudukan: Mutlak;
  Kiri: -70px;
}

/* Hover status*/
.button: hover {
  padding-left: 95px;
  Latar Belakang-kedudukan: Pusat 5PX;
}

.Button Span: Nth-Child (1) {
  Kedudukan: Mutlak;
  Kiri: -70px;
}

Harus diingat bahawa dalam keadaan ini sahaja, ikon akan meluncur ke dalam pandangan dan meninggalkan ruang yang cukup untuk tag "muat turun", tetapi tag akan terapung di luar butang ketika melayang.

Pada masa ini, menambah scale(1, 1) ke butang boleh menyimpan kandungan lengkap.

 /* Hover status*/
.button: hover {
  padding-left: 95px;
  Latar Belakang-kedudukan: Pusat 5PX;
  Transform: Skala (1, 1);
}

Nilai padding adalah nilai pengalaman dan akan berubah mengikut faktor seperti font, saiz fon, dll.

Akhirnya, atribut transition melancarkan peralihan animasi dan meningkatkan pengalaman pengguna.

 /* Status lalai*/
.button {
    Latar Belakang: 
      #f6bc00 
      URL (Data: Imej/SVG XML; BASE64, ...)
      tiada pusat -12px pusat;
    Limpahan: Tersembunyi;
    Peralihan: Padding .2s mudah, kedudukan latar belakang .2s mudah, transformasi .5s mudah;
}

Tambah beberapa pengubahsuaian terperinci, seperti sudut bulat, dan anda akan mendapat butang yang indah.

Atas ialah kandungan terperinci Mencipta semula kesan butang gelongsor netlify ' s. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!