css交互效果_创建一个CSS网格图像库（具有模糊效果和交互媒体查询）

css交互效果

在本教程中，我们将使用一堆普通的缩略图链接，并将它们变成具有模糊悬停效果的自适应CSS网格库。 我们还将使用出色CSS技巧来确保触摸屏用户不会错过！

这是我们将要创建的：

一点背景

链接充当用户所在页面（或您指定的任何页面）的子页面的导航，结果插件输出如下所示：

使用Rachel插件生成的标记，我们将执行以下操作：

• 使用CSS Grid排列缩略图，为我们提供响应式画廊。
• 使用CSS过滤器和过渡效果创建悬停效果。
• 使用漂亮CSS媒体查询来确保触摸屏用户即使没有悬停也仍然可以看到每个缩略图标题。

1.更改标记（一点）

让我们快速浏览一下Rachel的代码生成的标记。 清理后，它看起来实际上是这样的：

<div class="child-page-listing">

  <h2>Our Locations</h2>

  <article class="location-listing">
    <a class="location-title" href="#">San Francisco</a>
    <div class="location-image">
      <a href="#">
        <img src="image.jpg" alt="san francisco">
      </a>
    </div>
  </article>

  <!-- more articles -->

</div>

我们有一个父<div> ，它包含一个<h2>和一些<article>元素。 当我们使用CSS Grid时，我们首先定义一个网格容器。 在这种情况下，我们可以使用父<div> ，但这将使每个直接子项（包括<h2>一个网格项，因此我们需要进行一些更改。

我们将所有<article>元素包装在另一个<div> （可以随意使用您认为最合适的任何元素），我们将以想象的方式提供一类grid-container 。 使用此入门笔作为基础。

2.响应式CSS网格，分为三行

只需遵循一些规则，我们就可以将缩略图变成网格：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1em;
}

显示的简单行是display: grid; （将所有直接子级变为网格项并进行布局）和grid-gap: 1em; （定义了我们的装订线）。

调整浏览器窗口的大小，看看它的行为！

您需要添加的最后一个细节：

img {
  width: 100%;
  height: auto;
}

这将确保图像正确填充其容器（与Rachel的演示一起使用时特别必要，因为我们需要覆盖WordPress输出的内联宽度和高度属性）。

3.悬停效果

我们将标题用作缩略图的叠加层，将其悬停显示出来。 我们还将为悬停的图像提供红色效果，并给其提供轻微的模糊效果，以提高覆盖文字的可读性。

覆盖标题

要覆盖标题，我们需要将其放置在位置，因此我们首先将文章放置在position: relative; 标题position: absolute; 。 我们还将为它提供红色背景，并使其填充可用空间：

.location-listing {
  position: relative;
}

.location-title {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(90,0,10,0.4);
}

好的开始！

已经有一两件事需要改进，包括底部的额外空间（标题比缩略图略大）。 这可以通过删除图像容器上的任何line-height来解决：

.location-image {
  line-height: 0;
}

设置标题样式

一些印刷样式将改善标题的外观，而三行flexbox magic将为我们将其居中对齐：

.location-title {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(90,0,10,0.4);
  
  /* typographic styles */
  color: white;
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: none;
  
  /* position the text centrally*/
  display: flex;
  align-items: center;
  justify-content: center;
}

好多了：

隐藏标题

现在，通过删除标题的不透明度来隐藏标题，以便仅在悬停时才能看到它。 在我们已经添加到.location-title规则下面，还有另外两个规则应该可以做到：

/* hide the title by default */
  opacity: 0;
  transition: opacity .5s;

在这里，我们还设置了一个transition规则，以便当我们确实使不透明性恢复时（它将在0.5秒内逐渐发生）。 让我们现在把它带回来：

.location-listing:hover .location-title {
  opacity: 1;
}

大！ 现在，我们的标题再次出现在悬停上：

线条模糊

我们已经创建了一个漂亮的悬停效果，但是让我们更进一步吧？ 让我们也为图像添加模糊滤镜。 我们将从将模糊滤镜设置为正常状态开始，以便为我们提供一些过渡的方法。 然后，我们将鼠标悬停状态下的内容模糊2px（使该数字达到您所希望的极端，但我认为2px可以为我们提供出色的视觉效果）：

.location-image img {
  filter: blur(0px);
  transition: filter 0.3s ease-in;
}

.location-listing:hover .location-image img {
  filter: blur(2px);
}

这就是给我们的：

需要注意的几件事：

1. 标题消失了，因为浏览器现在正在其顶部渲染模糊的图形。
2. 模糊效果看起来不错，但是它也给我们带来了模糊的边缘（我们可以做得更好）。

修复隐藏的标题就像添加z-index: 1;一样简单z-index: 1; 到.location-title 。

修复模糊边缘需要更多的时间。 首先，我们缩放图像以使其更大一些，然后设置overflow: hidden; 放在图像容器（ .location-listing ）上，以便当较大的图像模糊时，可以有效裁剪其边缘。 这是有关两个元素的完成属性：

.location-image img {
  filter: blur(0px);
  transition: filter 0.3s ease-in;
  transform: scale(1.1);
}

.location-listing {
  position: relative;
  overflow: hidden;
}

transform: scale(1.1); 规则会将我们的图片在所有方向上缩放为1.1（其中1.0会使尺寸保持完全相同）。 这是更整洁的结果：

4.触摸屏问题

因此，我们有它！ 精美的图像网格，每个缩略图上都有模糊的悬停效果。 唯一的问题是，标题对那些无法将鼠标悬停在图像上的人都隐藏了（很多平板电脑和智能手机无法长时间按住“新闻”来模拟鼠标悬停），这不是很容易获得的内容。

幸运的是，CSS有一些非常有用的交互媒体查询 ，可以帮助我们解决问题（它们也享有相当不错的浏览器支持 ）。 这些查询将检测浏览器的输入机制（指针设备的质量，悬停的能力以及其他一些特殊定义），因此我们可以相当准确地确定是否在触摸屏设备上查看了缩略图。

以这个媒体查询为例（它确实符合您的期望）：

@media (hover: none) { }

在这些花括号中，我们将放置任何想要应用于无法处理:hover的浏览器的样式。 让我们这样做-我们将指出，对于无法进行悬停或至少不方便进行悬停的设备，缩略图将始终模糊并且标题将始终可见：

/* for touch screen devices */
@media (hover: none) { 
  .location-title {
    opacity: 1;
  }
  .location-image img {
    filter: blur(2px);
  }
}

看一看：

注意 ：如上所述，对此的支持非常合理，但是有关交互媒体查询的实现的讨论仍在进行中。 此规范很有可能会更改或删除零件。

结论

我们完成了！ 感谢您的关注，我希望您已经学习了一两件事，并喜欢使用CSS（谁不喜欢它？）。 这里是最后一个演示的另一种外观-享受将其添加到在第一部分中创建的Rachel主题文件中！

翻译自: https://webdesign.tutsplus.com/tutorials/create-a-css-grid-image-gallery-with-blur-effect-and-interaction-media-queries--cms-32287

css交互效果