以下以小程序标签为例,可以直接改view => div 适用于传统网页
wxml文件
<view class="bg-default"></view>
wxss文件
.bg-default {
animation-duration: 1s;
/* 动画时长1s */
animation-fill-mode: forwards;
/*当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)*/
animation-iteration-count: infinite;
/* 动画次数 无限次 */
animation-name: animationa;
/* 执行动画名称 */
animation-timing-function: linear;
/* 动画速度,线性匀速 */
/* background: #f6f7f8; */
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
/* 背景颜色 */
background-size: 750px auto;
/* 背景大小 */
height: 100%;
min-height: 1em;
position: relative;
}
@keyframes animationa {
/* 修改背景定位 */
0% {
background-position: -750rpx 0;
}
100% {
background-position: 750rpx 0
}
}
总的原理就是:
background-size 则定义背景大小,background-position则会根据background-size的值去定位,否则默认view的宽带为750rpx;
让background的定位在动画周期内匀速改变,就会有滚动条加载的效果了