使用background-attachment实现视差滚动、水波

基本内容

background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
这个属性存在浏览器兼容问题。

属性值：

• scroll 背景图片随着页面的滚动而滚动，这是默认的。
• fixed 背景图片不会随着页面的滚动而滚动。
• local 背景图片会随着元素内容的滚动而滚动。

视差滚动

可以实现简单的视差滚动效果，类似于 QQ官网 的效果。
参考文章 滚动视差？CSS 不在话下

<div class="container">
    <div class="content">1</div>
    <div class="g-img1"></div>
    <div class="content">2</div>
    <div class="g-img2"></div>
</div>

.container{
    width: 100%;
    height: 100%;
    overflow: auto;
}
.content{
    width: 100%;
    height: 100%;
    align-items: center;
}

.g-img1 {
    width: 100%;
    height: 100%;
    background-image: url('../image/11.webp');
    background-attachment: fixed;
    background-size: 100% 100%;
    background-repeat:no-repeat;
}
.g-img2 {
    width: 100%;
    height: 100%;
    background-image: url('../image/22.png');
    background-attachment: fixed;
    background-size: 100% 100%;
    background-repeat:no-repeat;
}

效果

水波效果

参考文章：CSS Water Wave (水波效果)

原理是基于上面文章的，这里是对这个效果的简单学习。

原理

水波效果的原理其是用六個 div 叠加在一起，让6个圆依次变大。需要注意的地方就是：
要设置层级，通过延时函数让6个圆依次变大、层级越低的圆越早出来。

forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

<div class="main">
     <div class="wave wave5"></div>
     <div class="wave wave4"></div>
     <div class="wave wave3"></div>
     <div class="wave wave2"></div>
     <div class="wave wave1"></div>
     <div class="wave wave0"></div>
 </div>

.main {
  width: 100%;
  height: 100%;
  position: relative;
}
.wave {
  // 绘制一个圆，并让圆居中
  position: absolute;
  top: calc((100% - 30px) / 2);
  left: calc((100% - 30px) / 2);
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.wave0 {
  background: #f00;
  z-index: 2;
  background-size: auto 106%;
  animation: w 1s forwards;
}
.wave1 {
  background: #d00;
  z-index: 3;
  animation: w 1s forwards;
  animation-delay: 0.2s;
}
.wave2 {
  background: #b00;
  z-index: 4;
  animation: w 1s forwards;
  animation-delay: 0.4s;
}
.wave3 {
  background: #900;
  z-index: 5;
  animation: w 1s forwards;
  animation-delay: 0.6s;
}
.wave4 {
  background: #700;
  z-index: 6;
  animation: w 1s forwards;
  animation-delay: 0.8s;
}
.wave5 {
  background: #500;
  z-index: 7;
  animation: w 1s forwards;
  animation-delay: 1s;
}
@keyframes w {
  0% {
    top: calc((100% - 30px) / 2);
    left: calc((100% - 30px) / 2);
    width: 30px;
    height: 30px;
  }
  100% {
    top: calc((100% - 200px) / 2);
    left: calc((100% - 200px) / 2);
    width: 200px;
    height: 200px;
  }
}

效果

优化版
在上面的基础上，将背景色替换为背景图片，并將背景设为固定：background-attachment:fixed;

<div class="main">
     <div class="wave wave5"></div>
     <div class="wave wave4"></div>
     <div class="wave wave3"></div>
     <div class="wave wave2"></div>
     <div class="wave wave1"></div>
     <div class="wave wave0"></div>
 </div>

.main {
  width: 100%;
  height: 100%;
  position: relative;
}
.wave{
  position:absolute;
  top:calc((100% - 30px)/2);
  left:calc((100% - 30px)/2);
  width:30px;
  height:30px;
  border-radius:50%;
  background:url('../image/22.png');
  background-attachment:fixed;
  background-position:center center;
}
.wave0{
  z-index:2;
  background-size:auto 106%;
  animation:w 1s forwards;
}
.wave1{
  z-index:3;
  background-size:auto 102%;
  animation:w 1s .2s forwards;
}
.wave2{
  z-index:4;
  background-size:auto 104%;
  animation:w 1s .4s forwards;
}
.wave3{
  z-index:5;
  background-size:auto 101%;
  animation:w 1s .5s forwards;
}
.wave4{
  z-index:6;
  background-size:auto 102%;
  animation:w 1s .8s forwards;
}
.wave5{
  z-index:7;
  background-size:auto 100%;
  animation:w 1s 1s forwards;
}
@keyframes w{
  0%{
    top:calc((100% - 30px)/2);
    left:calc((100% - 30px)/2);
    width:30px;
    height:30px;
  }
  100%{
    top:calc((100% - 350px)/2);
    left:calc((100% - 350px)/2);
    width:350px;
    height:350px;
  }
}