Bagaimana untuk Mencipta Kesan Pendedahan Teks untuk Butang menggunakan HTML dan CSS?-tutorial css-php.cn

Bagaimana untuk Mencipta Kesan Pendedahan Teks untuk Butang menggunakan HTML dan CSS?

王林

Lepaskan： 2023-08-19 12:17:13

ke hadapan

1465 orang telah melayarinya

How to Create Text Reveal Effect for Buttons using HTML and CSS?

Dalam artikel ini, kita akan membincangkan cara membuat butang menggunakan HTML dan CSS untuk menguji kesan paparan.

Butang ialah komponen antara muka pengguna yang paling penting untuk mana-mana tapak web Adalah sangat penting untuk mereka bentuk butang dengan cara yang unik secara kreatif. Kesan pendedahan teks untuk butang digunakan apabila ia digunakan untuk mendedahkan beberapa tawaran atau kandungan yang menarik untuk dipertingkatkan pengalaman pengguna.

Pendekatannya adalah untuk menutup butang dengan jalur dimensi yang sama seperti butang dan kemudian menggerakkannya ke satu arah pada tuding tetikus.

Untuk bergerak ke hadapan dengan pendekatan yang disebutkan, kita perlu mengetahui tentang dua pemilih sebelum dan tuding yang akan digunakan untuk kesan pendedahan teks untuk pendekatan butang dengan sifat css.

Pemilih ::before ialah elemen pseudo CSS yang digunakan untuk menambah kandungan yang sama beberapa kali sebelum kandungan elemen lain. Pemilih ini adalah sama dengan pemilih ::selepas. Ia membantu mencipta elemen pseudo yang mewakili anak pertama elemen yang dipilih dan sering digunakan untuk menambah kandungan hiasan pada elemen menggunakan atribut kandungan. Nilai lalainya ialah sebaris.

Tatabahasa

Berikut ialah sintaks pemilih sebelum -

element ::before{
   content:
}

Salin selepas log masuk

:pemilih hover ialah kelas pseudo CSS yang digunakan untuk menggayakan elemen apabila tetikus melayang di atasnya. Ia boleh digunakan pada mana-mana elemen, memilihnya apabila tetikus melayang di atasnya.

Tatabahasa

Berikut ialah sintaks pemilih sebelum -

element :hover{	
   // CSS declarations;
}

Salin selepas log masuk

Coretan kod HTML berikut melaksanakan penciptaan butang mudah menggunakan teg butang.

Index.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content=
         "width=device-width, initial-scale=1.0" />
      <title>Create Text Reveal Effect for Buttons using HTML and CSS</title>
   </head>
   <body>
      <button>Text Reveal</button>
   </body>
</html>

Salin selepas log masuk

Kod CSS −

Berikut ialah langkah-langkah untuk melaksanakan kod CSS −

Langkah 1 − Gunakan beberapa penggayaan asas pada butang seperti menambah padding dan jejari sempadan untuk mempunyai bucu bulat.

Langkah 2 − Sekarang gunakan pemilih sebelum untuk mencipta jalur dengan dimensi yang sama untuk menutup keseluruhan butang.

Langkah 3 − Sekarang gunakan pemilih tuding untuk mengalihkan jalur ke mana-mana arah apabila ia dialihkan ke kiri dalam contoh.

Nota − Anda boleh mengalihkan jalur ke mana-mana arah mengikut keperluan anda Juga, anda boleh menggunakan beberapa sifat lain untuk mengubah kesan mengikut anda.

Index.css

<style>
	button {
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 20px;
		padding: 15px;
	}
	button::before {
		content: "";
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background: blue;
		transition: 0.5s ease-in-out;
	}
	button:hover::before {
		left: -100%;
	}
</style>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Kod Penuh − Ia adalah gabungan dua bahagian kod di atas.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Text Reveal Effect for Buttons</title>
      <style>
         button {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 20px;
            padding: 15px;
         }
         button::before {
            content: "";
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background: blue;
            transition: 0.5s ease-in-out;
         }
         button:hover::before {
            left: -100%;
         }
      </style>
   </head>
   <body>
      <button>Text Reveal</button>
   </body>
</html>

Salin selepas log masuk

Pelayar Disokong − Penyemak imbas yang disokong oleh Pointer-events Property disenaraikan di bawah −

Google Chrome 1.0
Tepi 12.0
Internet Explorer 11.0
Firefox 1.5
Opera 9.0
Safari 4.0

Nota − Opera 4-6 menyokong dengan bertitik tunggal.(::sebelum).

Artikel ini memfokuskan pada cara menggunakan HTML dan CSS untuk mencipta butang dengan kesan pendedahan teks menggunakan sebelum dan pemilih CSS.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan Pendedahan Teks untuk Butang menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!