1

我不确定如何正确解释这一点，所以请耐心等待...

我一直在寻找有关如何旋转图像/背景文件夹的答案，以便它每 5 秒更改一次背景，如果它也可以淡入淡出，那将是一个奖励。我找到了一些类似的答案，但在尝试使其适应我的页面时遇到了一些困难。

我不确定我应该提供什么信息，所以我将继续发布我的索引，然后是我的样式表。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link href="css/styler.css" rel="stylesheet" type="text/css" />

</head>

<body>

<!--Start Main Canvas-->
<div class="maincanvas">



</div><!--End Main Canvas-->
</body>
</html>

我目前在“styler.css”样式表中显示我的背景，如下所示

 .maincanvas {
    background-image: url(../images/background/bg_image01.jpg);
    background-position: center;
    background-repeat: no-repeat;
    height: auto;
    left: 0px;
    min-height: 100%;
    min-width: 1100px;
    position: fixed;
    top: 0px;
    width: 100%;
 }

我希望这是足够的信息，对此的任何帮助都会很棒。谢谢！

4

2 回答 2

1

你可以使用 css 关键帧来做这样的事情。

因此，您将设置关键帧，您需要在浏览器中添加这些前缀，一种快速的方法是使用http://prefixr.com。

@keyframes "bg" {
 0% {
    background: url(link/to/image);
 }
 20% {
    background: url(link/to/image);
 }
 40% {
    background: url(link/to/image);
 }
 60% {
    background: url(link/to/image);
 }
 80% {
    background: url(link/to/image);
 }
 100% {
    background: url(link/to/image);
 }

}

然后像这样设置动画（再次记住前缀）。

animation: bg 25s 0 infinite ease;

因此，无限循环上的总动画时间为 5 x 5s = 25s。

当然，这样做的缺点是您必须手动添加图片网址。

于 2012-12-30T16:00:39.507 回答
-1

这是一个旋转图像的示例，但它使用 jQuery。

于 2012-12-30T05:50:22.633 回答