使用 HTML 和 CSS 建立翻譯懸停效果-css教學-PHP中文網

使用 HTML 和 CSS 建立翻譯懸停效果

PHPz

發布： 2024-08-09 17:00:32

原創

646 人瀏覽過

在現代網頁設計中，創造視覺吸引力和互動體驗是吸引使用者興趣的關鍵。實現這一目標的最有效方法之一是透過懸停效果，當使用者與頁面上的元素互動時，它會提供即時回饋。

什麼是翻譯懸停效果？
平移懸停效果涉及當使用者將滑鼠懸停在元素上時沿 X 或 Y 軸移動元素。這種效果給人一種元素正在移動或浮動的錯覺，提供更具互動性和回應性的使用者體驗。

輸出-

Creating a Translate Hover Effect with HTML and CSS

HTML-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Translate Hover Effect</title>
</head>
<body>
  <div class="image-container">
    <img src="image1.jpg" alt="Image 1" class="hover-image">
    <img src="image2.jpg" alt="Image 2" class="hover-image">
    <img src="image3.jpg" alt="Image 3" class="hover-image">
  </div>
</body>
</html>

登入後複製

CSS-

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.image-container {
  display: flex;
  gap: 20px;
  max-width: 1000px;
    flex-wrap:wrap;
}

.hover-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.hover-image:hover {
  transform: translateY(-10px);
}

登入後複製

display: flex;: 顯示：flex;屬性用於建立靈活的容器。此屬性可以輕鬆建立靈活且響應式的佈局結構，而無需浮動或定位。

展示的好處：flex； :