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

Rumah

hujung hadapan web

html tutorial

Goncang butang pada tuding menggunakan HTML dan CSS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 11, 2023 pm 07:41 PM

csshtmlkesan hover

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);
   }
}

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 id="Shaking-the-button-vertically-using-HTML-and-CSS"> 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>

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 id="Shaking-the-button-Horizontally-using-HTML-and-CSS"> 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>

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 id="Shaking-the-button-Horizontally-and-vartically-using-HTML-and-CSS"> Shaking the button Horizontally and vartically using HTML and CSS</h3>
   <div>
      <button class = "btn"> Point out the Button </button>
   </div>
</body>
</html>

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!

Kenyataan

Artikel ini dikembalikan pada:tutorialspoint. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Berikan contoh tag HTML dengan atribut.May 16, 2025 am 12:02 AM

Kaedah penggunaan tag dan atribut HTML termasuk: 1. Penggunaan Asas: Gunakan tag seperti dan, dan tambah maklumat yang diperlukan melalui atribut seperti SRC dan HREF. 2. Penggunaan Lanjutan: Gunakan data-* Atribut tersuai untuk mencapai interaksi yang kompleks. 3. Elakkan kesilapan biasa: Pastikan nilai harta dikelilingi oleh sebut harga. 4. Pengoptimuman Prestasi: Pastikan ia mudah, gunakan atribut standard dan nama kelas CSS untuk memastikan bahawa imej mempunyai atribut alt. Menguasai ini akan meningkatkan kemahiran pembangunan web.

Apakah perbezaan antara tag HTML dan atribut HTML?May 14, 2025 am 12:01 AM

Htmltagsdefinethestructureofawebpage, instantributesaddfunctionalityanddetails.1) tagslike, andoutlinethecontent'splacement.2) attributesuchassrc, class, andstyleenhancetagsbysbysbyspecifyingbyingsources, Stypespecingbyingsources, StypesingSpources, StypesingShources, Stytingingsources, Stytingingsources, Stytingingsources, Stytingingsources, Stytingingsources, Stytingingsources, Stytingingsources, Stytingingsources, Stytingingsources, Styytlingsources, Stytingingsources, Stytingingsources, Styytlingsources, Stysuringship

Masa Depan HTML: Evolusi dan TrendMay 13, 2025 am 12:01 AM

Masa depan HTML akan berkembang dalam arah yang lebih semantik, berfungsi dan modular. 1) Semantikisasi akan menjadikan tag menggambarkan kandungan dengan lebih jelas, meningkatkan seo dan akses bebas penghalang. 2) Fungsian akan memperkenalkan elemen dan atribut baru untuk memenuhi keperluan pengguna. 3) Modulariti akan menyokong pembangunan komponen dan meningkatkan kebolehgunaan semula kod.

Mengapa atribut HTML penting untuk pembangunan web?May 12, 2025 am 12:01 AM

HTMLattributesarecrucialinwebdevelopmentforcontrollingbehavior,appearance,andfunctionality.Theyenhanceinteractivity,accessibility,andSEO.Forexample,thesrcattributeintagsimpactsSEO,whileonclickintagsaddsinteractivity.Touseattributeseffectively:1)Usese

Apakah tujuan atribut alt? Mengapa penting?May 11, 2025 am 12:01 AM

Atribut alt adalah bahagian penting dari tag dalam HTML dan digunakan untuk menyediakan teks alternatif untuk imej. 1. Apabila imej tidak dapat dimuatkan, teks dalam atribut alt akan dipaparkan untuk meningkatkan pengalaman pengguna. 2. Pembaca skrin menggunakan atribut alt untuk membantu pengguna cacat penglihatan memahami kandungan gambar. 3. Enjin carian teks indeks dalam atribut alt untuk meningkatkan kedudukan SEO halaman web.

HTML, CSS, dan JavaScript: Contoh dan Aplikasi PraktikalMay 09, 2025 am 12:01 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML digunakan untuk membina struktur laman web; 2. CSS digunakan untuk mencantikkan penampilan laman web; 3. JavaScript digunakan untuk mencapai interaksi dinamik. Melalui tag, gaya dan skrip, ketiga -tiga ini bersama -sama membina fungsi teras laman web moden.

Bagaimana anda menetapkan atribut Lang pada tag ? Mengapa ini penting?May 08, 2025 am 12:03 AM

Menetapkan atribut Lang dari tag adalah langkah utama dalam mengoptimumkan kebolehcapaian web dan SEO. 1) Tetapkan atribut Lang dalam tag, seperti. 2) Dalam kandungan berbilang bahasa, tetapkan atribut Lang untuk bahagian bahasa yang berbeza, seperti. 3) Gunakan kod bahasa yang mematuhi piawaian ISO639-1, seperti "en", "fr", "ZH", dan lain-lain. Menetapkan atribut Lang dapat meningkatkan akses laman web dan kedudukan enjin carian.

Apakah tujuan atribut HTML?May 07, 2025 am 12:01 AM

HtmlattributeseSessealforenhancingwebelements'functionalityandappearance.theyaddinformationTodefinebehavior, penampilan, dan interaction, makewebsitesinteractive, responsif, andvisuallyappealing.attributeslikesrc, href, class, type, type, type, type, type, type, jenis ,disablesTransform

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

<🎜>: Tumbuh Taman - Panduan Mutasi Lengkap

4 minggu yang laluByDDD

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Nordhold: Sistem Fusion, dijelaskan

1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

<🎜> obscur: Ekspedisi 33 - Cara mendapatkan pemangkin Chroma yang sempurna

2 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.