[分享]css3平滑移动背景图片

当我们在网页中使用背景图片时，有时需要让其实现平滑移动的效果，让页面更具动感。通过CSS3可以轻松实现这一功能，下面通过代码演示具体步骤。 / 首先需要设置背景图片和背景大小 / body { bac...

当我们在网页中使用背景图片时，有时需要让其实现平滑移动的效果，让页面更具动感。通过CSS3可以轻松实现这一功能，下面通过代码演示具体步骤。

/* 首先需要设置背景图片和背景大小 */
body {
    background-image: url(bg.jpg);
    background-size: cover;
}
 
/* 定义动画 */
@keyframes move-bg {
    from {background-position: 0 0;}
    to {background-position: 100% 0;}
}
 
/* 应用动画 */
body {
     animation: move-bg 20s linear infinite;
} 

代码解析：

首先，我们需要为网页设置背景图片及其大小。在上述代码中，我们使用了body选择器来设置背景图片，将其命名为bg.jpg，同时设置了background-size为cover，让背景图片可以自动填充整个屏幕。

接着，我们需要定义一个名为move-bg的动画，其中from和to分别代表动画开始及结束时的状态。在此代码中，我们通过更改background-position的值来实现背景图片的移动效果。设置background-position的第一个值为百分比，代表图片在水平方向上的位置，第二个值为像素值，代表图片在垂直方向上的位置。在本例中，我们从起始位置开始移动，设置为0 0，给其终止位置设置为100% 0。

最后，我们需要将动画应用到网页中。我们在body选择器中添加了animation属性，将其值设置为move-bg 20s linear infinite。其中，move-bg为已经定义好的动画名称，20s代表动画持续时间，可以根据实际需要进行调整；linear代表动画效果为匀速运动，infinite代表动画无限循环播放。

通过上述代码，我们实现了背景图片的平滑移动效果，让网页更加生动有趣。相信这个小技巧能够为你的网页带来不同寻常的感受。