会悬停的卡片

最新推荐文章于 2024-07-31 14:35:30 发布

t.rail

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量661

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_42951382/article/details/128304353

版权

会悬停的卡片

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

因为其效果设计如卡片一般逐一被覆盖，我们就叫它会悬停的卡片吧！

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

1.添加内容

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

代码如下：

<div class="s-show">
    <img src="1.jpg" alt="">
</div>
<div class="s-show">
    <img src="2.jpg" alt="">
</div>
<div class="s-show">
    <img src="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如下：

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

4.总结

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

页面完整实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="height: 100vh;width: 100vw;background-color: rgb(35, 68, 68);text-align: center;">
        <h2 style="padding-top:45vh;color:white;" >请使用电脑打开，并下滑</h2>
    </div>
    <div class="s-show">
        <img src="1.jpg" alt="">
    </div>
    <div class="s-show">
        <img src="2.jpg" alt="">
    </div>
    <div class="s-show">
        <img src="3.jpg" alt="">
    </div>
    <!-- <div class="s-show">
        <img src="1.jpg" alt="">
    </div> -->
    <div style="height: 100vh;width: 100vw;background-color: rgb(35, 68, 68);text-align: center;">
        <h2 style="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>

t.rail

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
会悬停的卡片

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

扫一扫