怎么在一定时间内让d2从d1的底部从下往上的盖住d1

怎么在一定时间内让d2从d1的底部从下往上的盖住d1
<div id="d1" style="width: 100%; height:200px;">
我是d1的内容
</div>
<div id="d2">
<img src="images/153535.jpg"  width="100%" height="200">
</div>

解决方案 »

  1.   


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
    <style type="text/css">
    @keyframes anim{
      0% {top: 0px;}
    100% {top: -200px;}
    }
    #d2 {
    background-color: #ff0;
    position: relative;
    z-index: 99;
    animation: anim 2s forwards;
    }
    </style>
    </head>
    <body>
    <div id="d1" style="width: 100%; height:200px;">
    我是d1的内容
    </div>
    <div id="d2">
    <img src="images/153535.jpg"  width="100%" height="200">
    </div>
    </body>
    </html>