首先去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 元素在手机屏幕中处于绝对定位,然后设置对应的属性
注意,注意,注意,这里需要先给背景色才能出颜色,如果不设置背景色是不会有变化的。
这里可以看到我是在内容的下方让整个页面的颜色都变色