小程序实现css背景动画

首先去css层叠教程网站看一下动画，我这里是实现在小程序已经完成布局后，依然在内容下方设置背景动画颜色。

然后根据内容中教程实现：

.cover-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 设置遮挡层的层级，确保它在所有内容的下方 */
  animation-duration: 5s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background-color: rgba(199, 226, 236,0.3);
}

@keyframes slidein {
  from {
    filter: hue-rotate(0deg); 
  }

  to {
    filter: hue-rotate(360deg); 
  }
}

该例中 cover-container 元素在手机屏幕中处于绝对定位，然后设置对应的属性

注意，注意，注意，这里需要先给背景色才能出颜色，如果不设置背景色是不会有变化的。

这里可以看到我是在内容的下方让整个页面的颜色都变色