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 5 秒 = 無限ループでの合計アニメーション時間は 25 秒です。

もちろん、これの欠点は、画像の URL を手動で追加する必要があることです。

于 2012-12-30T16:00:39.507 に答える
-1

これは画像を回転させる例ですが、jQueryを使用しています。

于 2012-12-30T05:50:22.633 に答える