9

Webサイトを前後にスクロールするアニメーションHTML「マーキー」を作成したいと思います。

<div class="marquee">This is a marquee!</div>

およびCSS：

.marquee {
    position: absolute;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 4s linear;
}

@-webkit-keyframes rightThenLeft {
    0%   {left: 0%;}
    50%  {left: 100%;}
    100% {left: 0%;}
}

問題は、マーキーが画面の右端に達しても停止しないことです。画面から完全に移動し（水平スクロールバーが短時間表示されます）、その後戻ってきます。

では、マーキーの右端が画面の右端に達したときにマーキーを停止するにはどうすればよいですか？

編集：奇妙なことに、これは機能しません：

50% {right: 0%}
4

6 に答える 6

3

どういうわけか、margin-rightを使用し、右から左に移動するように設定することで、機能するようになりました。 http://jsfiddle.net/gXdMc/

この場合、マージン右100％が画面から消えない理由がわかりません。：D（クローム18でテスト済み）

編集：左から右も機能するようになりましたhttp://jsfiddle.net/6LhvL/

于 2012-05-21T04:45:41.310 に答える
3

CSSアニメーションテキストジェネレーターを使用するだけです。すでに作成されたテンプレートがあります

于 2013-02-19T12:02:37.363 に答える
1

こんにちはあなたは使用してあなたの結果を達成することができます <marquee behavior="alternate"></marquee>

HTML

<div class="wrapper">
<marquee behavior="alternate"><span class="marquee">This is a marquee!</span></marquee>
</div>

CSS

.wrapper{
    max-width: 400px;
    background: green;
    height: 40px;
    text-align: right;
}

.marquee {
    background: red;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 4s linear;
}

デモを参照してください：-http：//jsfiddle.net/gXdMc/6/

于 2012-05-21T07:30:13.483 に答える
1

div私は物事が私の要素の外に出ることを防ぐために以下を使うのが好きです。CSSのロールオーバーにも役立ちます。

.marquee{
    overflow:hidden;
}

これにより、divの外側に移動/移動するものがすべて非表示になり、ブラウザが拡張されてスクロールバーが表示されなくなります。

于 2013-04-24T00:41:06.310 に答える
0

私があなたの質問を正しく理解している場合は、マーキーの周りにラッパーを作成してから、ラッピング要素にwidth（または）を割り当てることができます。max-width例えば：

<div id="marquee-wrapper">
    <div class="marquee">This is a marquee!</div>   
</div>

そして#marquee-wrapper { width: x }。

于 2012-05-21T04:04:22.913 に答える
0

これが正しい解決策であるかどうかはわかりませんが、アニメーションCSSの直後に.marqueeクラスを再定義することでこれを達成しました。

以下を確認してください。

<style>
#marquee-wrapper{
    width:700px;
    display:block;
    border:1px solid red;
}

div.marquee{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
}

@-moz-keyframes myfirst /* Firefox */{
0%   {background:red; left:0px; top:0px;}
100% {background:red; left:100%; top:0px}
}
div.marquee{ 
left:700px; top:0px
}
</style>

<!-- HTMl COde -->

<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<div id="marquee-wrapper">
<div class="marquee"></div>
于 2012-05-21T04:42:17.857 に答える