会悬停的卡片

对于页面的设计，一些有趣的手法可以增加页面的风趣，通常我们滑动页面，上面的内容会被下面的“顶开”，但是如果它像卡片一样停住，直到被后面的覆盖住，是不是别有一番趣味？首先让我们先来欣赏一番：http://pages.mlxgc.top/

因为其效果设计如卡片一般逐一被覆盖，我们就叫它

会悬停的卡片

吧！

如果你对这个设计比较感兴趣，下面就看下如何实现吧！

1.添加内容

首先在页面中加一些图片内容，撑起整个页面，每张图都使用一个块元素包裹，作为一个可以悬停的卡片，为他们添加s-show的class属性。当然，这里可以随意改成自己喜欢的内容。

代码如下：

<divclass="s-show"><imgsrc="1.jpg"alt=""></div><divclass="s-show"><imgsrc="2.jpg"alt=""></div><divclass="s-show"><imgsrc="3.jpg"alt=""></div>

2.添加样式

想到让每个块元素在离开屏幕前都悬浮在顶部，当然是使用position了，那么如何实现呢？

sticky

是个最好的选择。但是，对于position的内容，页面会自动覆盖下面的元素，因此我们应该用

z-index

让它的图层下降到最下面，放置覆盖掉别的内容，此处给出css的写法：

*{margin: 0;padding: 0;}.s-show{height: 100vh;text-align: center;position: sticky;top: 0;z-index: -1;}img{width: 100vw;margin: 0 auto;}

position

知识参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

z-index

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index

3.模仿正常使用

在正常使用的过程中，页面上下文肯定存在其余内容，需要有上下文，修饰后完整

html

如下：

<divstyle="height: 100vh;width: 100vw;background-color:rgb(35, 68, 68);text-align: center;"><h2style="padding-top:45vh;color:white;">请使用电脑打开，并下滑</h2></div><divclass="s-show"><imgsrc="1.jpg"alt=""></div><divclass="s-show"><imgsrc="2.jpg"alt=""></div><divclass="s-show"><imgsrc="3.jpg"alt=""></div><!-- <div class="s-show">
        <img src="1.jpg" alt="">
    </div> --><divstyle="height: 100vh;width: 100vw;background-color:rgb(35, 68, 68);text-align: center;"><h2style="padding-top:45vh;color:white;">结束啦！</h2></div>

4.总结

此种样式写法似乎更适合在电脑端使用，对于移动端，如果让一则内容作为卡片占页面大部分高度，有些过分冗长，实现效果需要进行优化。此处想法来源：https://geex-arts.com/ ，感兴趣可以看看别人的实现效果。

页面完整实现如下：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divstyle="height: 100vh;width: 100vw;background-color:rgb(35, 68, 68);text-align: center;"><h2style="padding-top:45vh;color:white;">请使用电脑打开，并下滑</h2></div><divclass="s-show"><imgsrc="1.jpg"alt=""></div><divclass="s-show"><imgsrc="2.jpg"alt=""></div><divclass="s-show"><imgsrc="3.jpg"alt=""></div><!-- <div class="s-show">
        <img src="1.jpg" alt="">
    </div> --><divstyle="height: 100vh;width: 100vw;background-color:rgb(35, 68, 68);text-align: center;"><h2style="padding-top:45vh;color:white;">结束啦！</h2></div><style>*{margin: 0;padding: 0;}.s-show{height: 100vh;text-align: center;position: sticky;top: 0;/* overflow-x: hidden; */z-index: -1;}img{width: 100vw;margin: 0 auto;}</style></body></html>

标签： html css 前端

本文转载自: https://blog.csdn.net/qq_42951382/article/details/128304353
版权归原作者 t.rail 所有，如有侵权，请联系我们删除。

会悬停的卡片