主页 / 问题 / 1597123
Accepted
Евгения
Asked:2024-10-18 21:29:52 +0000 UTC2024-10-18 21:29:52 +0000 UTC

告诉我这样的卡是怎么卖的？

  • 772

从布局和BEC执行来看，这样的卡片是如何制作的？与飞机上的类似，这些显然不是滑块。它们的实现方式变得很有趣，当你将鼠标悬停在图片上时，图片会发生变化，但在移动版本中它只是滚动

如果你能告诉我一个视频或文章，我将不胜感激，我找不到类似的东西 在此输入图像描述

在此输入图像描述

html

1 个回答

  1. Best Answer

    让我们进行逆向工程。看代码 在此输入图像描述

    我们看到<div>剩余的带有图片的块被放置在一个块中。opacity:0除第一张外，该块中的所有图片都有。接下来，当你将鼠标悬停在这个块上时，将里面图片的属性更改opacity为1，并将其他图片设置为0。这样看起来它们正在变化。检查是否还有更多卡片，当您将鼠标悬停在最后一张卡片上时，显示最后一张图片和文本“另外 10 张照片”。您也许可以使用 z-index 执行相同的操作。可以这样实现。

    这是CSS代码

    <style data-emotion="css 7tf2d1">
.css-7tf2d1 {
height: 100%;
padding-top: 10px;
padding-left: 4px;
box-sizing: border-box;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}

.css-7tf2d1::before {
content: '';
display: block;
opacity: 0;
height: 3px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.5);
webkit-transition: background-color ease 0.15s;
transition: background-color ease 0.15s;
}

.css-7tf2d1:first-of-type {
padding-left: 10px;
}

.drom-notouch .css-7tf2d1:hover::before {
background-color: hsl(0, 0%, 100%);
}

.drom-notouch .css-7tf2d1:hover >.eeq72o40 {
opacity: 1;
}

.css-7tf2d1:only-of-type {
padding: 0;
}

.css-7tf2d1:only-of-type::before {
display: none;
}
</style>
    ```
    • 4

相关问题