0

キーフレームでうまくスクロールする画像がいくつかあります

@-webkit-keyframes headImage /* Safari and Chrome */
{
0% {background:url(../images/homeBackground1.jpg) no-repeat left top #D8E3E9;}
10% {background:url(../images/homeBackground2.jpg) no-repeat left top #D8E3E9;}
30% {background:url(../images/homeBackground3.jpg) no-repeat left top #D8E3E9;}
50% {background:url(../images/homeBackground4.jpg) no-repeat left top #D8E3E9;}
70% {background:url(../images/homeBackground5.jpg) no-repeat left top #D8E3E9;}
90% {background:url(../images/homeBackground1.jpg) no-repeat left top #D8E3E9;}
}

ただし、これらの画像の 1 つをクリック可能なリンクにしたいので、たとえば、homeBackground1.jpg が表示されている場合は google.co.uk にリンクしますが、他の画像は表示されている場合はどこにもリンクしません。

これを行う方法はありますか？

ありがとう

これを少し拡張すると、

それをhtmlに挿入するコードは単純です

<section id="journey"> </section>

とCSS

#journey {
    height:400px;
/*  border-bottom: 5px solid #E64097;
    border-top: 5px solid #E64097;*/
    background: url(../images/homeBackground1.jpg) no-repeat left top #D8E3E9;
    -moz-animation:headImage 60s infinite; /* Firefox */
    -webkit-animation:headImage 60s infinite; /* Safari and Chrome */
}
4

1 に答える 1

0

スプライトを作成する必要があります。したがって、すべての画像が 1 つの大きな画像に結合されますが、ユーザーは画像の一部しか見ることができません。

次にbackground-position、キー フレームを使用して変更します。ここに良いJSFIDDLE DEMOがあります

使用する必要があるキー フレームの数がわかっている場合は、CSS でfrom, toまたは%をタイム スケールとして使用できます。

于 2013-05-09T14:34:44.723 に答える