Question

首先，我想询问是否可以使用css更改背景图像（如果不是在jquery或javascript中，则重点是构建简单的代码）。嗯，其次，我想将背景划分为三个不同大小的部分，然后将照片放在每个部分（三张照片）中，我希望每个部分的照片在几秒钟后随机改变自动动画。例如，我在后台有part1 part2 part3，我有image1 image2 image3 image4 image5 image6 image7所以它必须像这样（例如）：

part1=image6
part2=image3
part3=image7

3秒后：

part1=image2(the other stays as it is)

2秒后：

part2=image1
part3=image4

5秒后：

part3=image2
part1=image4

并且喜欢那样。它似乎是每个用户个人资料中照片的Instagram背景，是的，我想要这样的东西。

Answer 1

如果使用css

，

可能是这样的

@-webkit-keyframes changeBG {
from {background: url(image1.jpg);}
to { background: url(image2.jp);}
}
@-moz-keyframes changeBG {
from {background: url(image1.jpg);}
to {background: url(image1.jpg);}
}

或者如果你想使用更多图像，你可以使用css关键帧从0％到100％开始像这样

@-webkit-keyframes changeBG {
        0% {background: url(image1.jpg);}
        10% { background: url(image2.jp);}
20% { background: url(image3.jp);}
30% { background: url(image4.jp);}
40% { background: url(image5.jp);}
50% { background: url(image6.jp);}
60% { background: url(image7.jp);}
70% { background: url(image8.jp);}
80% { background: url(image9.jp);}
90% { background: url(image10.jp);}
100% { background: url(image11.jp);}
        }

动画自动更改背景图像随机

1 个答案: