滑动视差营造高级感觉

最新推荐文章于 2024-11-15 19:51:40 发布

ChenNanXS

最新推荐文章于 2024-11-15 19:51:40 发布

阅读量573

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/ChenNanXS/article/details/121883119

版权

CSS 滑动视差网页设计背景图片交互效果

关键词由CSDN通过智能技术生成

滑动视差营造高级感觉

**我们在很多页面中都见到过这种高级的滑动效果

 其实原理很简单 可以用css实现很高级的感觉我们一起康康吧**

	HTML部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动视差</title>
    <link rel="stylesheet" href="hdsc.css">
</head>
<body>
<!--大div包裹-->
    <div class="shell">
        <!--放入图片-->
        <div class="image" style="background-image: url('imgs/1.jpg');"></div>
       <!-- 图片上的字-->
        <div class="heading">
            <h1>因为想和你一起</h1>
        </div>
        <!--空白的字-->
        <div class="text">
            <h1>这小高级感挠一下就上来了</h1>
        </div>

        <div class="image" style="background-image: url('imgs/2.jpg');"></div>
        <div class="heading">
            <h1>因为想和你一起</h1>
        </div>
        <div class="text">
            <h1>因为想和你一起</h1>
        </div>

        <div class="image" style="background-image: url('imgs/3.jpg');"></div>
        <div class="heading">
            <h1>因为想和你一起</h1>
        </div>
        <div class="text">
            <h1>因为想和你一起</h1>
        </div>

        <div class="image" style="background-image: url('imgs/4.jpg');"></div>
        <div class="heading">
            <h1>和我一起</h1>
        </div>
    </div>
</body>
</html>

CSS部分:

* {
    padding: 0;
    margin: 0;
}
/*
    设置宽高 添加透视效果
    perspective :
    是给父元素加上去的
        视距越大，效果越不明显，视距越小，效果越明显；
*/
.shell{
    height: 100vh;
    overflow-x: hidden;
    perspective: 3px;
}
/*
    设置相对定位 国定位置 居中 字体大小 文字间距
*/
.shell div{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    letter-spacing: 2px;
}
/*1vh等于视口高度的1%*/
.image{
    /*改变z轴并且放大1.6倍*/
    transform: translateZ(-1px) scale(1.6);
    background-size: cover;
    height: 100vh;
    z-index: -1;
}
.text{
    height: 50vh;
    background-color: #fff;
}
.text h1{
    color: #000;
}
.heading{
    z-index: -1;
    transform: translateY(-30vh) translateZ(1px);
    color: #fff;
    font-size: 30px;
}
![效果出来了](https://img-blog.csdnimg.cn/fcda5e4c8d204e7e8cd4b52f9d50a871.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQ2hlbk5hblhT,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)