使用 HTML 和 CSS 创建翻译悬停效果-css教程-PHP中文网

使用 HTML 和 CSS 创建翻译悬停效果

PHPz

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

原创

647 人浏览过

在现代网页设计中，创造视觉吸引力和互动体验是吸引用户兴趣的关键。实现这一目标的最有效方法之一是通过悬停效果，当用户与页面上的元素交互时，它会提供即时反馈。

什么是翻译悬停效果？
平移悬停效果涉及当用户将鼠标悬停在元素上时沿 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； :