本后端教程由友联站长发布。 我刚读完，觉得还不错。 它是用纯 CSS 实现的，尽管在开发主题时 CSS3 使用较少。 这是一个简单实用的CSS3键盘浏览图片缩放效果，我们可以将它应用在相册中，或者在轮播中显示的图片中，这样就可以将键盘移动到图片上来快速预览图片。 同时css3鼠标滑过图片放大，你还可以在此基础上进行扩展，比如给图片添加阴影、边框等。 整个画面放大效果相当炫酷。
但在编写代码之前，我们要做的就是：
悬停在前面的卡片应在保持纵横比的同时展开。 当一张卡片悬停时，其他卡片不应改变大小并向外通信，以免彼此重叠。 所有卡片应保持垂直居中。
听起来不错吧？ 现在让我们开始带您一步步编写代码。
HTML 和灵活的元素
我们首先设置用于一行预览的图像。 这些包括：
包含多个 .item 元素的 .container 父元素 每个 .item 元素都包含包裹在锚标记中的图像 将 .container 转换为对齐行中项目的 Flex 容器 设置 .item 类 Flex 行为，以便它们在行
HTML代码如下：
CSS代码如下：
.container {
display: flex;
margin-top: 50px;
}
.item {
position: relative;
display: block;
flex: 1 1 0px;
}
.item img {
display: block;
max-width: 100%;
}
疗效如下：
CSS3中键盘经过图片时会突出显示放大的效果
悬停时展开项目
我们的下一步是使该项目在悬停时展开。 我们可以通过对元素之间的间距进行动画处理来实现此目的，但这会影响文档的流程并导致悬停项目的同级项缩小 - 此外，对长度属性进行动画处理会提高个别情况下的性能。
为了防止挤压悬停项目的同级项目css3鼠标滑过图片放大，我们将为变换属性（特别是其scale()函数）设置动画。 这不会像宽度那样影响文档流。
CSS代码如下：
.container {
display: flex;
margin-top: 50px;
}
.item {
position: relative;
display: block;
flex: 1 1 0px;
transition: transform 500ms;
}
.container .item:focus,
.container .item:hover {
transform: scale(1.5);
z-index: 1;
}
body {
overflow: hidden;
}
.item img {
display: block;
max-width: 100%;
}
GIF效果如下：
CSS3中键盘经过图片时会突出显示放大的效果
出站同级元素
让悬停项目的兄弟项目远离悬停项目是该过程中棘手的部分。 我们可以使用的 CSS 功能之一是通常的同级组合器。 这允许我们选择位于悬停项目之后的所有同级项目。
我们将使用transform属性的translateX()函数来连接对象。 此外，动画过渡比影响文档流的其他属性（例如前导和填充）要好得多。
由于我们将项目设置为悬停时缩放 150%，因此过渡应设置为 25%。 这是悬停项目占用的额外空间的一半。
.item:hover ~ .item {
transform: translateX(25%);
}
这连接了右边的东西，我们如何变换左边的东西呢？ 由于通用同级组合器仅适用于位于给定选择器之后的同级（无“向后”），因此我们需要另一种方法。
一种方法是在父容器本身上添加额外的悬停规则。 计划如下：
我们假设您的文档使用从左到右的书写方式。 如果要在从右到左的上下文中使用此效果，则需要将悬停的外部容器中的所有项目设置为向右对齐，并使用普通同级组合器将所有选定的项目向左对齐。
代码如下所示：
.container {
display: flex;
margin-top: 50px;
}
.item {
position: relative;
display: block;
flex: 1 1 0px;
transition: transform 500ms;
}
.container:focus-within .item,
.container:hover .item {
transform: translateX(-25%);
}
.item:focus ~ .item,
.item:hover ~ .item {
transform: translateX(25%);
}
.container .item:focus,
.container .item:hover {
transform: scale(1.5);
z-index: 1;
}
body {
overflow: hidden;
}
.item img {
display: block;
max-width: 100%;
}
最终GIF效果如下：
CSS3中键盘经过图片时会突出显示放大的效果
出站同级元素
此时，悬停效果看起来更加平滑且不那么僵硬。 需要注意的一件事：这个最终版本使用 :focus 和 :focus-within 伪类来支持鼠标导航。
