Jalur latar animasi yang beralih ke hover

Bagaimana menggunakan atribut CSS

untuk membuat jalur latar belakang yang sejuk? Artikel ini akan berkongsi kes yang menunjukkan bagaimana untuk mencapai kesan visual peralihan jalur latar belakang apabila tetikus berakhir dengan kecerunan CSS, mod campuran, dan background-size. background-size

Biasanya, kami menggunakan

untuk membuat imej latar belakang mengisi seluruh elemen. Tetapi kes ini memerlukan kawalan saiz latar belakang yang lebih maju: jalur latar belakang yang peralihan apabila tetikus melayang. Kesannya adalah seperti berikut (sila hover tetikus anda ke kawasan berikut): background-size: cover

(demonstrasi kesan dinamik harus dimasukkan di sini, yang konsisten dengan teks asal)

Kunci untuk mencapai kesan ini adalah dengan menggunakan mod kecerunan dan pengadunan dengan cerdik. Mari kita mulakan dengan struktur HTML yang mudah:

<div></div>

Gaya CSS Awal:

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

Buat jalur latar belakang

kita boleh menggunakan kecerunan linear CSS untuk membuat jalur. Oleh kerana lebar jalur yang tidak rata dan keperluan untuk kesan peralihan, kita tidak boleh menggunakan kecerunan berulang secara langsung. Di sini, kami mensimulasikan lima jalur dengan memanfaatkan lima latar belakang kecerunan linear dan meletakkannya ke sudut kanan atas bekas:

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

Untuk memudahkan kod, kita boleh menggunakan sifat tersuai:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

bermaksud kecerunan, dan --gt mengawal mengimbangi menegak jalur. Pada masa ini kecerunan linear ditetapkan kepada Black Pure, iaitu untuk kesan masking dan pengadunan berikutnya. Untuk mengelakkan latar belakang dari jubin berulang kali, kita perlu menetapkan --n: background-repeat: no-repeat;

div {
  /* ... */
  background-repeat: no-repeat;
}

Laraskan saiz dan jarak jalur

jalur semasa bertindih dan hampir mustahil untuk dilihat. Kita perlu menggunakan atribut

untuk menetapkan lebar dan ketinggian jalur. Atribut background-size menyokong sintaks dua nilai, dan kami dapat menetapkan lebar dan ketinggian masing-masing. Kod berikut menetapkan lebar setiap jalur, menggunakan nilai lalai ketinggian: background-size auto

Sejak ketinggian

div {
  /* ... */
  background-size: 60%, 90%, 70%, 40%, 10%;
}

, jalur akan merangkumi satu sama lain. Kita perlu menggunakan sintaks nilai berganda dan menetapkan ketinggian yang sama:

auto

Untuk menambah jarak antara jalur, kita dapat sedikit mengurangkan ketinggian setiap jalur:

div {
  /* ... */
  background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n);
}

topeng dan mod campuran

div {
  --h: calc(var(--n) - 5px);
  /* ... */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Tukar warna latar ke putih:

Untuk mencapai kesan pelekat dan penggabungan, kami membungkus

div {
  /* ... */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* ... */
}

dalam bekas induk dan menambah yang baru:

<div> <code><div> susun atur dengan grid CSS: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><section> &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; </section></pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Gunakan warna kecerunan pada </p> pertama, dan gunakan gaya jalur sebelumnya pada kedua <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">section { display: grid; align-items: center; justify-items: center; width: 500px; height: 500px; } section &gt; div { width: inherit; height: inherit; grid-area: 1 / 1; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> dan melaksanakan mod pengadunan skrin menggunakan <p>: <code><div> <code><div> <code>mix-blend-mode: screen; kesan hover tetikus

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  /* ... previous styles ... */
  mix-blend-mode: screen;
}

Akhirnya, kami menambah kesan tetikus untuk mengembangkan lebar jalur ke lebar penuh bekas:

Kesan akhir ditunjukkan pada mulanya. Sila ambil perhatian bahawa untuk pengalaman pengguna yang lebih baik, adalah disyorkan untuk mempertimbangkan untuk mengurangkan tetapan untuk kesan sukan untuk memenuhi keutamaan pengguna yang berbeza.

Kaedah ini adalah pemeliharaan dan penyesuaian yang baik, dan anda boleh dengan mudah mengubah ketinggian, warna dan orientasi jalur, dll.

Saya harap kes ini dapat membantu anda memahami dan menggunakan atribut CSS. Jika anda mempunyai kaedah pelaksanaan yang lain, sila kongsi di bahagian komen! background-size