2

CSS3アニメーションで画面のすぐ内側から画面の外に移動するクラウドがあります。雲が画面から離れているとき、画面は水平方向にスクロールしますが、これは理想的ではありません。CSSでスクロールバーを非表示にすることはできますが、スクロールを禁止したいと思います。

#c-2 {
background:url(clouds.png) no-repeat;
width:161px;
height:94px;
position:absolute;
top:40%;
right:0%;
animation:CloudB 20s 1s infinite alternate ease-in-out;
-moz-animation:CloudB 20s 1s infinite alternate ease-in-out;
-webkit-animation:CloudB 20s 1s infinite alternate ease-in-out;
-o-animation:CloudB 20s 1s infinite alternate ease-in-out;
}

@keyframes CloudB {
    0%   { right:0%; top:40%; }
    100% { right:-10%; top:40%; }
}

@-moz-keyframes CloudB {
    0%   { right:0%; top:40%; }
    100% { right:-10%; top:40%; }
}

@-webkit-keyframes CloudB {
    0%   { right:0%; top:40%; }
    100% { right:-10%; top:40%; }
}

@-o-keyframes CloudB {
    0%   { right:0%; top:40%; }
    100% { right:-10%; top:40%; }
}

http://energycenter.herokuapp.com/

4

1 に答える 1

4

これを試してください - http://jsfiddle.net/m3af2/

body {
    background-color: #99CCE8;
    margin: 0;
    line-height: 1;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    position: relative;
}
于 2012-08-10T15:16:14.470 に答える