css 背景滑动 |koala编译scss出错

/* 滑动效果 */
body {
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
animation: slide 20s linear infinite;
}
@keyframes slide {
0% {
background-position-x: 0;
}
100% {
background-position-x: 100%;
}
}

代码解释：

上面的代码会让网站的背景图片自动滑动。代码中，大家先将背景图片设置为网站的背景。接着，大家使用了CSS3的动画(animation)来实现背景滑动的效果。大家将动画命名为slide，并设置了它的执行时间为20秒，动画速度为线性。最后，大家通过keyframes指定了动画的过程。当动画开始时，背景图片的位置偏移量(background-position-x)为0，当动画结束时，背景图片的横向位置偏移量变成了100%。而repeat-count属性指定了动画的重复次数，无限次的循环使得滑动永不停歇。

与此类似的，你还可以采用background-position-y来控制背景图片的纵向位置偏移量。

/* 滑动效果 */
body {
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
animation: slide 20s linear infinite;
}
@keyframes slide {
0% {
background-position-y: 0;
}
100% {
background-position-y: 100%;
}
}

代码解释：

这段代码使用了CSS3中的动画(animation)，它与第一个示例代码的区别在于background-position-y属性的使用。在这个示例中，大家将背景图片的垂直位置偏移量设为0，当动画结束时，将背景图片的纵向位置偏移量设为100%。

综上所述，通过简单的CSS代码，大家可以轻松实现网站背景滑动的效果，为网站增添一份魅力。赶快动手试试吧！