Goncang butang pada tuding menggunakan HTML dan CSS-html tutorial-php.cn

Goncang butang pada tuding menggunakan HTML dan CSS

WBOY

Lepaskan： 2023-09-11 19:41:02

ke hadapan

690 orang telah melayarinya

Goncang butang pada tuding menggunakan HTML dan CSS

Dalam tutorial ini, kita akan belajar menggunakan HTML dan CSS untuk menggoncang butang pada tuding pengguna. Membuat butang goncang boleh menjadikan pengalaman pengguna apl anda lebih menarik.

Kami perlu mencipta animasi tersuai menggunakan peraturan "kerangka kunci" CSS untuk menggoncang sebarang elemen HTML. Kami kemudiannya boleh menggunakan bingkai kunci tersuai sebagai nilai sifat CSS "animasi" untuk menggoncang butang apabila pengguna menuding di atasnya.

Tatabahasa

Pengguna boleh menggoncang butang tuding menggunakan HTML dan CSS dengan mengikut sintaks berikut.

.btn:hover {
   animation: key_frame_name animation_time repetition;
}
@keyframes key_frame_name {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(10deg);
   }
}

Salin selepas log masuk

Dalam sintaks di atas, kami mencipta peraturan CSS tersuai untuk menambah animasi goncang pada butang. Pengguna boleh menggantikan "masa_animasi" dengan unit masa dan "pengulangan" dengan nombor untuk mengulang animasi.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Dalam contoh di bawah, kami menggoncang butang secara menegak. Kami mencipta butang HTML biasa menggunakan teg "butang" dan memberikannya nama kelas "btn". Kami menggunakan nama kelas untuk mengakses butang dan menggayakannya.

Dalam CSS, kami menggunakan sifat "animasi" untuk menambahkan bingkai utama "goncang" pada butang apabila pengguna menuding di atasnya. Dalam rangka utama Goncang, kami memutarkan butang "0 darjah" pada 0% masa animasi, "5 darjah" pada 20% masa, "0 darjah" pada 50% masa dan "0 darjah" pada 50 % masa animasi butang "5 darjah" 70% masa ialah "0 darjah" dan 100% masa ialah "0 darjah".

Dalam output, pengguna boleh memerhati butang bergegar dalam arah menegak.

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: red;
         color: white;
         font-size: 40px;
      }
      .btn:hover {animation: shaking 0.5s infinite;}
      @keyframes shaking {
         0% {transform: rotate(0deg);}
         20% {transform: rotate(-4deg);}
         50% {transform: rotate(0deg);}
         70% {transform: rotate(4deg);}
         100% {transform: rotate(0deg);}
      }
   </style>
   <body>
      <h2> Shaking the button vertically using HTML and CSS </h2>
      <p> Please hover the cursor over the button below to see the shaking effect.</p>
      <div>
         <button class = "btn"> Submit </button>
      </div>
   </body>
</html>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Dalam contoh di bawah, kami menggunakan HTML dan CSS untuk menggoncang butang secara mendatar.

Kami menggunakan sifat CSS 'transform: translateX()' untuk menggoncang butang secara mendatar. Pertama, kami menggerakkan butang ke arah negatif. Seterusnya, kami mengalihkan butang ke kedudukan asalnya. Kemudian, kami mengalihkan butang ke arah positif, dan akhirnya, kami menggunakan peraturan 'keyframes' CSS untuk mengalihkan butang ke kedudukan asalnya.

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: black;
         color: white;
         font-size: 40px;
      }
      .btn:hover {animation: shaking 0.4s infinite;}
      @keyframes shaking {
         0% {transform: translateX(-10px);}
         20% {transform: translateX(-5px);}
         50% {transform: translateX(-5px);}
         70% {transform: translateX(-5px);}
         80% {transform: translateX(10px);}
         90% {transform: translateX(-10px);}
      }
   </style>
   <body>
      <h2> Shaking the button Horizontally using HTML and CSS </h2>
      <p> Please hover the cursor over the button below to see the shaking effect.</p>
      <div>
         <button class = "btn"> Hover the Button </button>
      </div>
   </body>
</html>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Dalam contoh di bawah, kita akan belajar bagaimana untuk menggoncang butang secara mendatar dan menegak. Kami menggunakan 'translateX()' bersama-sama dengan 'rotate()' sebagai nilai sifat CSS 'transform'.

‘translateX()’ menggerakkan butang secara mendatar, dan fungsi ‘putar()’ menggerakkan butang secara menegak. Dalam output, pengguna boleh memerhatikan bahawa apabila mereka melayang di atas butang, ia bergerak sedikit mendatar dan menegak. Walau bagaimanapun, pengguna boleh meningkatkan nilai parameter fungsi 'translateX()' untuk mengagak lebih dalam arah mendatar.

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: green;
         color: white;
         font-size: 25px;
      }
      .btn:hover {animation: shaking 0.4s infinite;}
      @keyframes shaking {
         0% {transform: translateX(0) rotate(0deg);}
         25% {transform: translateX(15px) rotate(5deg);}
         50% {transform: translateX(0px) rotate(0deg);}
         75% {transform: translateX(-15px) rotate(-5deg);}
         100% {transform: translateX(0px) rotate(0deg);}
      }
   </style>
   <body>
   <h3> Shaking the button Horizontally and vartically using HTML and CSS</h3>
   <div>
      <button class = "btn"> Point out the Button </button>
   </div>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, pengguna belajar menjentik butang HTML menggunakan CSS sahaja. Dalam contoh pertama, kami belajar untuk menggoncang butang secara menegak. Dalam contoh kedua, kami belajar menggoncang butang secara mendatar;

Atas ialah kandungan terperinci Goncang butang pada tuding menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!