Bagaimanakah saya boleh menterjemah imej atau ikon dengan melayang di atasnya?-tutorial css-php.cn

Bagaimanakah saya boleh menterjemah imej atau ikon dengan melayang di atasnya?

Dalam pembangunan web, interaktiviti adalah kunci untuk menyampaikan pengalaman pengguna yang tidak dapat dilupakan. Teknik biasa ialah menuding pada imej atau ikon untuk mendedahkan lebih banyak maklumat atau menukar rupa. Menterjemah dengan menuding pada imej atau ikon ialah cara terbaik untuk menambah pergerakan dan minat pada tapak web anda.

Dalam artikel ini, kita akan belajar cara menterjemah imej atau ikon pada tuding. Untuk menyelesaikan tugasan ini, kami akan mempelajari kaedah yang berbeza hanya menggunakan HTML dan CSS.

Cara berbeza untuk menterjemah imej atau ikon pada tuding

Kaedah 1: Kesan peralihan CSS

Cara pertama untuk menterjemah imej atau ikon pada tuding boleh dilakukan dengan menggunakan peralihan CSS. Peralihan CSS digunakan untuk menukar nilai sifat dengan lancar, seperti semasa menuding pada elemen, dsb. Menggunakan peralihan, anda boleh menentukan tempoh dan fungsi masa animasi anda.

Tatabahasa

Berikut ialah sintaks untuk mengubah imej atau ikon menggunakan peralihan CSS.

<img  src="your-image.jpg" class="trans-image" alt="Bagaimanakah saya boleh menterjemah imej atau ikon dengan melayang di atasnya?" >
<style>
   .trans-image {
      transition: transform 0.3s ease-in-out;
   }
   .trans-image:hover {
      transform: translateX(20px);
   }
</style>

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami menggunakan tag imej dengan nama kelas "trans-image". Dalam bahagian CSS, kami menetapkan sifat peralihan kepada "mengubah", tempoh 0.3 saat dan menggunakan fungsi pelonggaran "kemudahan-masuk-keluar". Apabila kami menuding pada elemen, kami menetapkan sifat transformasi untuk menterjemahkan 30 piksel ke kanan jika ia imej, atau 20 piksel ke kanan jika ia ikon.

<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      .translate-image {
         transition: transform 0.7s ease-in-out;
      }
      .translate-image:hover {
         transform: translateX(30px);
      }
      #icon {
         transition: transform 0.7s ease-in-out;
      }
      #icon:hover {
         transform: translateX(20px);
      }        
   </style>
</head>
<body>
   <h2>Translating image and icon using CSS Transitions</h2>
   <p> Hover over the below image or icon to see the transition </p>
   <!-- Translating image on hover using CSS transitions -->
   <img  src="https://www.tutorialspoint.com/static/images/logo.png?v2" class="translate-image" alt="Bagaimanakah saya boleh menterjemah imej atau ikon dengan melayang di atasnya?" >
   <br>
   <!-- Translating icon on hover using CSS transitions -->
   <i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
</body>
</html>

Salin selepas log masuk

Kaedah 2: animasi CSS

Cara pertama untuk menterjemah imej atau ikon pada tuding ialah menggunakan animasi CSS. CSS membenarkan elemen dianimasikan menggunakan HTML tanpa menggunakan JavaScript atau Flash. Di sini kita boleh menukar seberapa banyak sifat CSS yang kita mahu, seberapa banyak kali yang kita mahu.

Untuk menggunakan animasi CSS, kita perlu menetapkan beberapa bingkai utama pada animasi tersebut. Bingkai kunci menentukan gaya elemen pada titik masa tertentu. Menggunakan animasi membolehkan kami mencipta kesan yang lebih kompleks dan dinamik daripada peralihan.

Tatabahasa

Di bawah ialah sintaks untuk mengubah imej atau ikon menggunakan animasi CSS.

<i class="your-icon"></i>
<style>
   .your-icon {
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: #ccc;
      animation: translate 0.3s ease-in-out;
   }
   .your-icon:hover {
      animation-name: translate-hover;
   }
   @keyframes translate {
      from {
         transform: translateX(0);
      }
      to {
         transform: translateX(10px);
      }
   }
   @keyframes translate-hover {
      from {
         transform: translateX(10px);
      }
      to {
         transform: translateX(20px);
      }
   }
</style>

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami menggunakan teg "i" dengan "ikon" kelas dan teg Bagaimanakah saya boleh menterjemah imej atau ikon dengan melayang di atasnya? dengan "imej" kelas. Di sini, kami menetapkan atribut paparan kepada "inline-block". Kami juga menetapkan sifat animasi kepada "terjemah", tempoh kepada 0.3 saat, dan fungsi pelonggaran kepada "memudahkan-masuk-keluar". Sekarang apabila kami menuding, dengan menggunakan bingkai utama dan menetapkan nama animasi kepada "terjemah-tuding", kami mengalihkan ikon dan imej 10 piksel ke kanan, dan kemudian 20 piksel ke kanan pada tuding berikutnya.

<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      .image {
         display: inline-block;
         width: 100px;
         height: 100px;
         animation: translate 0.3s ease-in-out;
      }
      .image:hover {animation-name: translate-hover;}
      #icon {
         display: inline-block;
         width: 100px;
         height: 100px;
         animation: translate 0.3s ease-in-out;
      }
      #icon:hover {animation-name: translate-hover;}
      @keyframes translate {
         from {transform: translateX(0);}
         to {transform: translateX(10px);}
      }
      @keyframes translate-hover {
         from {transform: translateX(10px);}
         to {transform: translateX(20px);}
      }
   </style>
</head>
<body>
   <h2>Translating image and icon using CSS Animations</h2>
   <p> Hover over the imgae orr icon to see the effect</p>
   <!-- Translating image on hover using CSS Animations -->
   <img  src="https://fastly.picsum.photos/id/213/200/300.jpg?hmac=t-54teMEgFL3q9WPaRq2t7YdGCU9aIRw77OCaHlSVRs" class="image" alt="Bagaimanakah saya boleh menterjemah imej atau ikon dengan melayang di atasnya?" > <br>
   <!-- Translating icon on hover using CSS Animations -->
   <i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
</body>
</html>

Salin selepas log masuk

Kaedah 3: Grid CSS

Cara pertama untuk membuat imej atau ikon diterjemahkan pada tuding adalah dengan menggunakan Grid CSS. Grid CSS menggunakan sistem susun atur berasaskan grid dengan baris dan lajur, menjadikannya lebih mudah untuk mereka bentuk halaman web tanpa perlu menggunakan apungan dan kedudukan. Di sini, kami menentukan kedudukan item grid menggunakan sifat baris grid dan lajur grid, dan kemudian menggunakan sifat transformasi CSS, seperti putaran atau terjemahan, pada item grid untuk diterjemahkan.

Tatabahasa

Di bawah ialah sintaks untuk mengubah imej atau ikon menggunakan Grid CSS.

<div class="grid-container">
   <img  src="your-image.jpg" class="trans-image" alt="Bagaimanakah saya boleh menterjemah imej atau ikon dengan melayang di atasnya?" >
</div>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-gap: 10px;
   }
   .trans-image {
      grid-row: 2 / 3;
      grid-column: 2 / 3;
      transition: transform 0.3s ease-in-out;
   }
   .trans-image:hover {
      grid-column: 3 / 4;
      transform: translateX(10px);
   }
</style>

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami telah menentukan teg "div" dengan kelas "bekas". Di sini, dalam CSS kami telah menetapkan sifat paparan kepada "grid", dan menentukan templat grid dengan tiga lajur dan tiga baris, setiap satu dengan unit pecahan 1. Untuk mengubah imej dan ikon, kami telah menggunakan sifat peralihan untuk "transform" dengan tempoh 0.3 saat dan fungsi pelonggaran "ease-in-out" yang apabila dilegar menterjemah imej atau ikon 10 piksel ke kanan.

<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      .image {
         grid-row: 2 / 3;
         grid-column: 2 / 3;
         transition: transform 0.3s ease-in-out;
      }
      .image:hover {
         grid-column: 3 / 4;
         transform: translateX(10px);
      }
      #icon {
         grid-row: 2 / 3;
         grid-column: 2 / 3;
         transition: transform 0.3s ease-in-out;
      }
      #icon:hover {
         grid-column: 3 / 4;
         transform: translateX(10px);
      }
   </style>
</head>
<body>
   <div>
      <h2>Translating image and icon using CSS Grid</h2>
      <p> Hover over the image or icon to see the effect </p>
      <!-- Translating image on hover using CSS Grid -->
      <img  src="https://www.tutorialspoint.com/static/images/logo.png?v2" class="image" alt="Bagaimanakah saya boleh menterjemah imej atau ikon dengan melayang di atasnya?" >
      <br>
      <!-- Translating icon on hover using CSS Grid -->
      <i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
   </div>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Menambahkan interaktiviti pada tapak web kami boleh meningkatkan pengalaman pengguna, dan satu cara untuk mencapainya ialah menterjemah imej atau ikon pada tuding. Kesan ini boleh dicapai menggunakan HTML dan CSS, terdapat cara yang berbeza untuk mencapainya, seperti menggunakan peralihan CSS atau animasi atau grid. Semua kaedah ini membolehkan kami menentukan tempoh dan fungsi masa animasi dan mencipta kesan dinamik. Menggunakan teknik ini, kami boleh mencipta laman web yang lebih menarik yang akan menarik perhatian pengunjung anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menterjemah imej atau ikon dengan melayang di atasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!