Bagaimana untuk mencipta kesan animasi hover butang menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk mencipta kesan animasi hover butang menggunakan CSS?

PHPz

Lepaskan： 2023-09-06 09:53:02

ke hadapan

1359 orang telah melayarinya

Bagaimana untuk mencipta kesan animasi hover butang menggunakan CSS?

Tuding kesan animasi dalam CSS bermakna penampilan elemen berubah apabila penuding tetikus melayang di atasnya. Kami menggunakan CSS untuk mencipta pelbagai kesan animasi pada tuding, seperti elemen penskalaan, pudar, gelongsor atau berputar.

Sifat kesan animasi hover butang

transform − Sifat ini membolehkan anda menskala, memutar atau menterjemah elemen.
opacity − Atribut ini menetapkan tahap ketelusan elemen, dengan 1 bermaksud boleh dilihat sepenuhnya dan 0 bermaksud telus sepenuhnya.
warna latar belakang − Atribut ini menetapkan warna latar belakang elemen.
warna − Atribut ini menetapkan warna teks elemen.
peralihan − Sifat ini mengawal kesan animasi antara dua keadaan, seperti keadaan lalai dan keadaan tuding.
bawah dan atas - Sifat meletakkan elemen berbanding bekasnya.

Buat kesan animasi hover butang menggunakan CSS

Animasi tuding butang ialah cara yang bagus untuk menambah daya tarikan visual pada tapak web anda. Untuk mencipta kesan animasi hover butang menggunakan CSS, kami biasanya menggunakan pemilih kelas pseudo :hover digabungkan dengan peralihan CSS atau animasi bingkai utama. Dengan langkah berikut, kita boleh mencipta kesan animasi hover butang dengan mudah.

Langkah 1 - Buat kod HTML untuk animasi bola melekit
Langkah 2 - Tambahkan gaya CSS pada butang
Langkah 3 - Tambahkan kesan animasi tuding

Dalam artikel ini kami akan meneroka tiga contoh untuk mencipta kesan animasi hover butang dalam CSS.

Contoh 1 - Tuding untuk zum

Dalam contoh ini, butang akan mempunyai latar belakang biru dan teks putih. Apabila penunjuk tetikus melayang di atas butang, butang akan berskala 20% dalam masa 0.5 saat menggunakan sifat transformasi dalam peralihan yang lancar dan warna latar belakang akan bertukar kepada hijau.

<!DOCTYPE html>
<html>
<head>
   <style>
      Body{
         text-align:center;
      }
      .scale-up-btn {
         background-color: blue;
         color: white;
         padding: 10px 30px;
         margin:20px;
         border: none;
         transition: transform 0.5s ease;
         transform: scale(1);
         border-radius:10px;
      }
      .scale-up-btn:hover {
         transform: scale(1.2);
         background-color: green;
      }
   </style>
</head>
   <body>
      <h2>Button hover animation effect using CSS</h2>
      <h3>Scale Up on Hover effect</h3>
      <button class="scale-up-btn">Hover Me</button>
   </body>
</html>

Salin selepas log masuk

Contoh 2: Pudar masuk pada tetikus

Dalam contoh ini, butang akan mempunyai latar belakang biru dan teks putih, dengan kelegapan awal 0.5. Apabila penuding tetikus melayang di atas butang, kelegapan akan beralih dengan lancar kepada 1 dalam 0.5 saat.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .fade-in-btn {
         background-color: blue;
         color: white;
         padding: 10px 20px;
         margin:15px;
         border: none;
         opacity: 0.5;
         transition: opacity 0.5s ease;
      }
      .fade-in-btn:hover {
         opacity: 1;
      }
   </style>
</head>
   <body>
      <h2>Button hover animation effect using CSS</h2>
      <h3>Fade In Effect on Hover</h3>
      <button class="fade-in-btn">Hover Me</button>
   </body>
</html>

Salin selepas log masuk

Contoh 3: Leret ke atas pada tetikus

Dalam contoh ini, butang akan mempunyai latar belakang biru dan teks putih, dengan kedudukan ditetapkan kepada relatif. Sifat bawah ditetapkan kepada 0, bermakna butang berada di bahagian bawah bekasnya. Apabila penuding tetikus melayang di atas butang, sifat bahagian bawah akan meningkat kepada 20px, menyebabkan butang itu meluncur ke atas dengan peralihan yang lancar dalam masa 0.5 saat.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .slide-up-btn {
         background-color: blue;
         color: white;
         padding: 15px 30px;
         border: none;
         position: relative;
         bottom: 0;
         transition: bottom 0.5s ease;
         border-radius:10px;
      }
      .slide-up-btn:hover {
         bottom: 20px;
      }
   </style>
</head>
   <body>
      <h3>Slide Up Effect on Hover</h3>
      <button class="slide-up-btn">Hover Me</button>
   </body>
</html>

Salin selepas log masuk

Kesimpulan

Kesan animasi tuding butang ialah cara yang bagus untuk menambah daya tarikan visual pada tapak web anda. Dengan menggunakan CSS, kami boleh mencipta kesan dinamik dan menarik yang menjadikan tapak web menonjol. Hanya beberapa baris kod.

Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan animasi hover butang menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!