1. 首頁
  2. 問答
  3. 動畫圖像像它從右向左移動

動畫圖像像它從右向左移動

2016-07-05 192 views
2

我想要動起來應該從右到左像雲層一樣移動的地板，但它的工作原理是問題是它溢出容器外。我怎樣才能防止這種情況發生？對不起，我是新來的CSS動畫。提前致謝。動畫圖像像它從右向左移動

這裏是我做的小提琴：點擊here

.container { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
#clouds{ 
 
    padding: 100px 0; 
 
    background: #3598dc; 
 
    background: -webkit-linear-gradient(top, #3598dc 0%, #fff 100%); 
 
    background: -linear-gradient(top, #3598dc 0%, #fff 100%); 
 
    background: -moz-linear-gradient(top, #3598dc 0%, #fff 100%); 
 
} 
 

 
.cloud { 
 
    width: 200px; height: 60px; 
 
    background: #fff; 
 
    border-radius: 200px; 
 
    -moz-border-radius: 200px; 
 
    -webkit-border-radius: 200px; 
 
    position: relative; 
 
} 
 

 
.cloud:before, .cloud:after { 
 
    content: ''; 
 
    position: absolute; 
 
    background: #fff; 
 
    width: 100px; height: 80px; 
 
    position: absolute; top: -15px; left: 10px; 
 

 
    border-radius: 100px; 
 
    -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    -webkit-transform: rotate(30deg); 
 
    transform: rotate(30deg); 
 
    -moz-transform: rotate(30deg); 
 
} 
 

 
.cloud:after { 
 
    width: 120px; height: 120px; 
 
    top: -55px; left: auto; right: 15px; 
 
} 
 

 
#character{ 
 
    margin-top: -120px; 
 
    background:url(http://i.imgur.com/Zjsbcni.png); 
 
    width: 84px; 
 
    height: 126px; 
 
    animation: walk 1.0s steps(6) infinite; 
 
    margin-left: 425px; 
 
} 
 

 
#flooring { 
 
    height: 39px; 
 
    background-image: url(http://i.imgur.com/usFekrp.png); 
 
    animation: movefloor 20s linear infinite; 
 
    overflow: hidden; 
 
} 
 

 
@keyframes movefloor { 
 
    0% {margin-left: 1000px;} 
 
    100% {margin-left: -1000px;} 
 
} 
 

 
@keyframes walk { 
 
    from { background-position: 0px; } 
 
    to { background-position: -500px; } 
 
} 
 

 
.x1 { 
 
    -webkit-animation: moveclouds 15s linear infinite; 
 
    -moz-animation: moveclouds 15s linear infinite; 
 
    -o-animation: moveclouds 15s linear infinite; 
 
} 
 

 
.x2 { 
 
    left: 200px; 
 
    -webkit-transform: scale(0.6); 
 
    -moz-transform: scale(0.6); 
 
    transform: scale(0.6); 
 
    opacity: 0.6; /*opacity proportional to the size*/ 
 

 
    -webkit-animation: moveclouds 25s linear infinite; 
 
    -moz-animation: moveclouds 25s linear infinite; 
 
    -o-animation: moveclouds 25s linear infinite; 
 
} 
 

 
.x3 { 
 
    left: 252px; 
 
    top: -200px; 
 
    -webkit-transform: scale(0.8); 
 
    -moz-transform: scale(0.8); 
 
    transform: scale(0.8); 
 
    opacity: 0.8; /*opacity proportional to the size*/ 
 

 
    -webkit-animation: moveclouds 20s linear infinite; 
 
    -moz-animation: moveclouds 20s linear infinite; 
 
    -o-animation: moveclouds 20s linear infinite; 
 
} 
 

 

 
@-webkit-keyframes moveclouds { 
 
    0% {margin-left: 1000px;} 
 
    100% {margin-left: -1000px;} 
 
} 
 
@-moz-keyframes moveclouds { 
 
    0% {margin-left: 1000px;} 
 
    100% {margin-left: -1000px;} 
 
} 
 
@-o-keyframes moveclouds { 
 
    0% {margin-left: 1000px;} 
 
    100% {margin-left: -1000px;} 
 
}
<div class="container"> 
 
    <div id="clouds"> 
 
     <div class="cloud x1"></div> 
 
     <div class="cloud x2"></div> 
 
     <div class="cloud x3"></div> 
 
     <div class="cloud x4"></div> 
 
     <div class="cloud x5"></div> 
 
    </div> 
 
    <div id="character"></div> 
 
    <div id="flooring"></div> 
 
</div>

來源

2016-07-05 claudios

+0

'溢出：hidden'？ – gcampbell

+0

請查看參考工作小提琴 – claudios

+1

添加'溢出：hidden'到div'＃clouds' – Pugazh

回答

2

添加overflow:hidden到#clouds：

body { 
 
    font-family: 'Candal', sans-serif; 
 
    overflow: hidden; 
 
    background-color:black; 
 

 
    /* remove this line, this is to prove the cloud is invisible ^^^ */ 
 
} 
 

 
.container { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
#clouds{ 
 
    padding: 100px 0; 
 
    background: #3598dc; 
 
    background: -webkit-linear-gradient(top, #3598dc 0%, #fff 100%); 
 
    background: -linear-gradient(top, #3598dc 0%, #fff 100%); 
 
    background: -moz-linear-gradient(top, #3598dc 0%, #fff 100%); 
 
    overflow:hidden; 
 

 
    /* add this line ^^^ */ 
 
} 
 

 
.cloud { 
 
    width: 200px; height: 60px; 
 
    background: #fff; 
 
    border-radius: 200px; 
 
    -moz-border-radius: 200px; 
 
    -webkit-border-radius: 200px; 
 

 
    position: relative; 
 
} 
 

 
.cloud:before, .cloud:after { 
 
    content: ''; 
 
    position: absolute; 
 
    background: #fff; 
 
    width: 100px; height: 80px; 
 
    position: absolute; top: -15px; left: 10px; 
 

 
    border-radius: 100px; 
 
    -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 

 
    -webkit-transform: rotate(30deg); 
 
    transform: rotate(30deg); 
 
    -moz-transform: rotate(30deg); 
 
} 
 

 
.cloud:after { 
 
    width: 120px; height: 120px; 
 
    top: -55px; left: auto; right: 15px; 
 
} 
 

 
#character{ 
 
    margin-top: -120px; 
 
    background:url(http://i.imgur.com/Zjsbcni.png); 
 
    width: 84px; 
 
    height: 126px; 
 
    animation: walk 1.0s steps(6) infinite; 
 
    margin-left: 425px; 
 
} 
 

 
#flooring { 
 
    height: 39px; 
 
    background-image: url(http://i.imgur.com/usFekrp.png); 
 
    animation: movefloor 20s linear infinite; 
 
    overflow: hidden; 
 
} 
 

 
@keyframes movefloor { 
 
    0% {margin-left: 1000px;} 
 
    100% {margin-left: -1000px;} 
 
} 
 

 
@keyframes walk { 
 
    from { background-position: 0px; } 
 
    to { background-position: -500px; } 
 
} 
 

 
.x1 { 
 
    -webkit-animation: moveclouds 15s linear infinite; 
 
    -moz-animation: moveclouds 15s linear infinite; 
 
    -o-animation: moveclouds 15s linear infinite; 
 
} 
 

 
/*variable speed, opacity, and position of clouds for realistic effect*/ 
 
.x2 { 
 
    left: 200px; 
 

 
    -webkit-transform: scale(0.6); 
 
    -moz-transform: scale(0.6); 
 
    transform: scale(0.6); 
 
    opacity: 0.6; /*opacity proportional to the size*/ 
 

 
    /*Speed will also be proportional to the size and opacity*/ 
 
    /*More the speed. Less the time in 's' = seconds*/ 
 
    -webkit-animation: moveclouds 25s linear infinite; 
 
    -moz-animation: moveclouds 25s linear infinite; 
 
    -o-animation: moveclouds 25s linear infinite; 
 
} 
 

 
.x3 { 
 
    left: 252px; 
 
    top: -200px; 
 
    -webkit-transform: scale(0.8); 
 
    -moz-transform: scale(0.8); 
 
    transform: scale(0.8); 
 
    opacity: 0.8; /*opacity proportional to the size*/ 
 

 
    -webkit-animation: moveclouds 20s linear infinite; 
 
    -moz-animation: moveclouds 20s linear infinite; 
 
    -o-animation: moveclouds 20s linear infinite; 
 
} 
 

 
.x4 { 
 
    left: 470px; 
 
    top: -250px; 
 

 
    -webkit-transform: scale(0.75); 
 
    -moz-transform: scale(0.75); 
 
    transform: scale(0.75); 
 
    opacity: 0.75; /*opacity proportional to the size*/ 
 

 
    -webkit-animation: moveclouds 18s linear infinite; 
 
    -moz-animation: moveclouds 18s linear infinite; 
 
    -o-animation: moveclouds 18s linear infinite; 
 
} 
 

 
.x5 { 
 
    left: -150px; 
 
    top: -150px; 
 

 
    -webkit-transform: scale(0.8); 
 
    -moz-transform: scale(0.8); 
 
    transform: scale(0.8); 
 
    opacity: 0.8; /*opacity proportional to the size*/ 
 

 
    -webkit-animation: moveclouds 20s linear infinite; 
 
    -moz-animation: moveclouds 20s linear infinite; 
 
    -o-animation: moveclouds 20s linear infinite; 
 
} 
 

 
@-webkit-keyframes moveclouds { 
 
    0% {margin-left: 1000px;} 
 
    100% {margin-left: -1000px;} 
 
} 
 
@-moz-keyframes moveclouds { 
 
    0% {margin-left: 1000px;} 
 
    100% {margin-left: -1000px;} 
 
} 
 
@-o-keyframes moveclouds { 
 
    0% {margin-left: 1000px;} 
 
    100% {margin-left: -1000px;} 
 
}
<div class="container"> 
 
    <h1>CSS3 Animation</h1> 
 
    <div id="clouds"> 
 
\t \t <div class="cloud x1"></div> 
 
\t \t <div class="cloud x2"></div> 
 
\t \t <div class="cloud x3"></div> 
 
\t \t <div class="cloud x4"></div> 
 
\t \t <div class="cloud x5"></div> 
 
\t </div> 
 
    <div id="character"></div> 
 
    <div id="flooring"></div> 
 
</div>

來源

2016-07-05 07:47:59 Randy

+0

是的，它修復了雲，但我想知道爲什麼地板不起作用。 – claudios

1

Updated fiddle

修復1：覆蓋溢出容器：

overflow: hidden在身上只會隱藏頁面主體溢出的元素。所以您需要將overflow: hidden添加到div #clouds。

修改#clouds如下：

#clouds { 
    padding: 100px 0; 
    background: #3598dc; 
    background: -webkit-linear-gradient(top, #3598dc 0%, #fff 100%); 
    background: -linear-gradient(top, #3598dc 0%, #fff 100%); 
    background: -moz-linear-gradient(top, #3598dc 0%, #fff 100%); 
overflow: hidden; 
}

修復2：地板動畫隱藏 樓動畫被隱藏，因爲它是溢出的身體。在身體改變overlfow: hidden到overflow-x: hidden

如下修改body：

body { 
    font-family: 'Candal', sans-serif; 
    overflow-x: hidden; 
}

來源

2016-07-05 07:49:42 Pugazh

+0

是的，它修復了雲，但我想知道爲什麼地板不起作用。 – claudios

+0

它隱藏，因爲它溢出身體。將'overlfow：hidden'更改爲'overflow-x：hidden'。 [更新小提琴]（https://jsfiddle.net/Pugazh/ft53344u/4/） – Pugazh

+0

地板仍然無法正常工作 – claudios

1

解決方案

我想是因爲每一個元素都包含在.container你應該添加一個overflow: hidden;到.container和#clouds。雲被絕對定位，因此它們可能在.container內部溢出，因此在#clouds上應用overflow: hidden;。如果您希望它位於容器內，請更改#character的邊距。

CSS

.container {   
    margin: 0 auto; 
    overflow: hidden; 
    text-align: center; 
    width: 50%; 
} 

#clouds {   
    background: #3598dc; 
    background: -webkit-linear-gradient(top, #3598dc 0%, #fff 100%); 
    background: -linear-gradient(top, #3598dc 0%, #fff 100%); 
    background: -moz-linear-gradient(top, #3598dc 0%, #fff 100%); 
    overflow: hidden; 
    padding: 100px 0;  
} 

#character{ 
    animation: walk 1.0s steps(6) infinite; 
    background:url(http://i.imgur.com/Zjsbcni.png);  
    height: 126px; 
    margin-left: 320px; 
    margin-top: -120px; 
    width: 84px; 
}

Check this fiddle

來源

2016-07-05 08:05:30 Hkidd

+0

它的工作謝謝 – claudios

相關問題

 相關問題