0

下記のコードは、marqueeタグの代わりにCSSを使って文字(〇)を"ジグザグ走行"させたものです。
しかし、その文字は親要素のdiv(id="container")で設定した背景色の上の枠からははみ出て、
下の枠からは幾分上の方で向きが変わってしまいます。
どうすれば、上下の枠に接したところで向きが変わるようになるでしょうか。ご教示ください。

<style>

#container{
        background:silver;
        width:100%;
        height:30px;
}

#moji1 {display:inline-block;
    -webkit-animation:moji1 15s infinite linear;
    animation:moji1 15s infinite linear;
}
@keyframes moji1 {   
    From{
        -ms-transform:translateX(1100px);
        -webkit-transform:translateX(1100px);
        transform:translateX(1100px);
    }
    To{
        -ms-transform:translateX(-1100px);
        -webkit-transform:translateX(-1100px);
        transform:translateX(-1100px);
    }
}


.moji2 {display:inline-block;
        font-size:20px;
    -webkit-animation:moji2 0.5s infinite linear;
    animation:moji2 0.5s infinite linear;
}
@keyframes moji2 {   
    From{
        -ms-transform:translateY(-10px);
        -webkit-transform:translateY(-10px);
        transform:translateY(-10px);
    }
    To{
        -ms-transform:translateY(10px);
        -webkit-transform:translateY(10px);
        transform:translateY(10px);
    }
}
</style>

<div id="container">
   <div id="moji1">
       <span class="moji2">○</span>
   </div>
</div>
2
  • 文字がどういう形に表示されるかはフォントによります。「〇」という文字も、あるフォントでは大きく、別のフォントでは小さくレンダリングされます。そのレンダリング結果との接点を計算するのはかなり複雑な処理です。そういった事も考慮の上で正確にコントロールしたいのですか? それとも、だいたいでよいのですか?
    – mjy
    2016年5月7日 16:41
  • 下記のように微調節しましたら、ちょっと見には上下に接しているように 見えますが、原因はそういうことなのですか。でも、なぜ親要素の"div"の 枠をはみ出るのでしょか。 #container{}内のheightを"50px",及び@keyframes moji2 { From{}内を"30px",To{}内を"0px"
    – user9359
    2016年5月8日 13:00

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。