如何使用純的CSS或純javascript

從底部一個div滑動所以我有在背景上的圖像和表示上述廣告的iframe效果。（跳房子一個是廣告，花是html圖像）
我想要做的就是顯示廣告從背景圖像的底部向上滑動。我嘗試了很多東西。尋找純粹的CSS或純JavaScript解決方案。

廣告應從背景圖片的底部滑動，然後在顯示位置固定。只是從底部到廣告節目的滑動效果。

例如，請在本頁面查看廣告： -

http://www.thenewsminute.com/article/united-states-south-india-can-southern-collective-get-us-better-deal-delhi-46501

來源

2016-07-27 MiHawk

分享一些相關的代碼，所以我們可以幫助你更好 –

我想這是你在找什麼：


 
.container { 
 
    position:relative; 
 
    overflow:hidden; 
 
    width:300px; 
 
    height:200px; 
 
} 
 
.img { 
 
    width:100%; 
 
    height:100%; 
 
    background:blue; 
 
} 
 

 
.slidemeup{ 
 
    background:red; 
 
    position:absolute; 
 
    bottom:-50px;; 
 
    height:50px; 
 
    width:100%; 
 
    left:0; 
 
    animation-name:slideup; 
 
    animation-delay:0.5s; 
 
    animation-duration:0.8s; 
 
    animation-fill-mode:forwards; 
 
    animation-timing-function:ease-out; 
 

 
    
 
} 
 
@keyframes slideup { 
 
    0%{bottom:-50px} 
 
    100%{bottom:0;} 
 
}

<div class="container"> 
 
<div class="img"> 
 

 
</div> 
 
<div class="slidemeup"> 
 
SLIDE ME UP 
 
</div> 
 
</div>

我用img類，而不是像一個div。但它應該可以工作

來源

2016-07-27 07:27:07

感謝Mihai T.我是新的前端開發。任何關於如何改進我在HTML和CSS方面的知識的建議。我應該開始自己的項目還是通過課程練習。我知道它有一個陡峭的學習曲線，但一些方向將有所幫助。 – MiHawk

好。起初，你應該看看這個網站http://www.w3schools.com/有點知道什麼選項（css html jq），當你想解決問題時，你可以隨意使用。但只有通過工作和嘗試新的東西，你可以學習和提高你的知識:) 不要忘記給我的答案評分爲接受:) –

我已經評價它。你提供解決方案的速度非常快。的確如此。 – MiHawk

-1

放置頁面下的廣告以及何時應滑動起來給它一個激活類改變位置。

動畫可以用transitions完成。

來源

2016-07-27 07:16:08 Error404

如何使用純的CSS或純javascript

回答

相關問題