css实现视差滚动效果

最新推荐文章于 2023-10-30 22:37:57 发布

chainnnn

最新推荐文章于 2023-10-30 22:37:57 发布

阅读量641

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/m0_46239267/article/details/123737177

版权

css实现视差滚动效果

实现该效果其实非常简单，就是background-attachment：fixed
background-attachment有三个属性值
在这里插入图片描述
下面是效果：

在这里插入图片描述

 <body>
    <div class="box">
      <div class="flowImage fixed-bg bg1">
        <p>aaa</p>
      </div>
      <div class="flowImage fixed-bg bg2">
        <p>bbb</p>
      </div>
      <div class="flowImage fixed-bg bg3">
        <p>ccc</p>
      </div>
      <div class="flowImage fixed-bg bg4">
        <p>ddd</p>
      </div>
      <div class="flowImage fixed-bg bg5">
        <p>eee</p>
      </div>
      <div class="flowImage fixed-bg bg6">
        <p>fff</p>
      </div>
    </div>
  </body>

body, html {
    height: 100%;
    margin: 0;
    padding: 0
}

.box {
    height: 100%;
}

.flowImage {
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /* 关键代码 */
   background-attachment: fixed; 
}

.flowImage>p {
    margin: 0;
    color: #fff;
    font-size: 30px;
}

.bg1 {
    background-image: url('https://img2.baidu.com/it/u=2774200779,2806926182&fm=253&fmt=auto&app=138&f=JPEG?w=468&h=312');
}

.bg2:nth-child(2) {
    background-image: url('https://img2.baidu.com/it/u=2071017917,3511466775&fm=26&fmt=auto');
}

.bg3:nth-child(3) {
    background-image: url("https://img0.baidu.com/it/u=1047766032,2215646629&fm=253&fmt=auto?w=282&h=188");
}

.bg4:nth-child(4) {
    background-image: url("https://img1.baidu.com/it/u=3634692134,880218970&fm=253&fmt=auto&app=138&f=JPEG?w=636&h=426");
}

.bg5:nth-child(5) {
    background-image: url("https://img2.baidu.com/it/u=2273407447,338628316&fm=253&fmt=auto&app=120&f=JPEG?w=980&h=631");
}

.bg6:nth-child(6) {
    background-image: url("https://img1.baidu.com/it/u=3107176190,1328093718&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333");
}

chainnnn

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css实现视差滚动效果

css实现视差滚动效果实现该效果其实非常简单，就是background-attachment：fixedbackground-attachment有三个属性值下面是效果： <body> <div class="box"> <div class="flowImage fixed-bg bg1"> <p>aaa</p> </div> <div class="fl
复制链接

扫一扫