gpt4 book ai didi

javascript - 如何每 5 秒旋转一次背景图像? javascript?

转载 作者:太空宇宙 更新时间:2023-11-03 18:53:49 25 4
gpt4 key购买 nike

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

我一直在寻找关于如何旋转我的图像/背景文件夹的答案,以便它每 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%;
}

我希望这些信息足够了,任何对此的帮助都会很棒。谢谢!

最佳答案

你可以使用 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。

当然,这样做的缺点是您必须手动添加图片 url。

关于javascript - 如何每 5 秒旋转一次背景图像? javascript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14088275/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com