Rumah > Artikel > hujung hadapan web > Bagaimanakah saya boleh menterjemah imej atau ikon dengan melayang di atasnya?
Bagaimanakah saya boleh menterjemah imej atau ikon dengan melayang di atasnya?
- 王林ke hadapan
- 2023-08-31 15:13:021217semak imbas
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>
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>
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>
Contoh
Dalam contoh di bawah, kami menggunakan teg "i" dengan "ikon" kelas dan teg 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>
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>
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>
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!