这是帘子效果，完整代码如下，大家不明白的可以复制代码到编辑器运行，代码很简单，研究一下都能学会。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #ml{ text-align: center; font-size: 30px; } .kk{ width: 1250px; height: 900px; } .kk>div{ width: 500px; height: 400px; float: left; margin: 30px 30px; position: relative; overflow: hidden; } .kk>div>img{ width: 100%; height: 100%; } .kk>div>div{ width: 100%; height: 100%; position: absolute; bottom: 100%; line-height: 400px; background-color: rgba(0, 0, 0, 0.5); font-size: 20px; color: white; text-align: center; transition: 2.5s; } .kk>div:hover>div{ bottom: 0; } </style> </head> <body> <div id="ml"><b>帘子</b></div> <div class="kk"> <div> <img src="https://img1.baidu.com/it/u=724179003,4096104503&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661274000&t=88ba0075e025de3e01cd2ceb13adb963" alt=""> <div>美丽的花朵</div> </div> <div> <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661274000&t=f7708b3543f3da0edae69a218d01fdc7" alt=""> <div>宁静的夜晚</div> </div> </body> </html>
接下来，看看反向帘子。
如下是反向帘子的代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> #ml{ text-align: center; font-size: 30px; } .kk{ width: 1250px; height: 900px; } .kk>div{ width: 500px; height: 400px; float: left; margin: 30px 30px; position: relative; overflow: hidden; } .kk>div>img{ width: 100%; height: 100%; } .kk>div>div{ width: 100%; height: 100%; position: absolute; top: 100%; line-height: 400px; background-color: rgba(0, 0, 0, 0.5); font-size: 20px; color: white; text-align: center; transition: 2.5s; } .kk>div:hover>div{ top: 0; } </style> </head> <body> <div id="ml"><b>反向帘子</b></div> <div class="kk"> <div> <img src="https://img1.baidu.com/it/u=724179003,4096104503&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661274000&t=88ba0075e025de3e01cd2ceb13adb963" alt=""> <div>美丽的花朵</div> </div> <div> <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661274000&t=f7708b3543f3da0edae69a218d01fdc7" alt=""> <div>宁静的夜晚</div> </div> </div> </body> </html>
反向帘子和帘子在写代码时的不同，就是反向帘子用top属性，而帘子用bottom属性。那么应该怎么理解这两个属性呢？
1.这里有一个很多初学者的错误，就是对width属性理解不到位。
<div> <div> <div></div> </div> </div>
大家注意看，上面是一个div包了一个div，然后又包了一个div。这是爷孙三代的关系，如果最外面div宽度设置为900px，那么这个div的子元素，也就是里面的div宽度设置50%，就是根据它的父元素的宽度来定义的，就是450px。如果最里面的div宽度设置为50%，意思就是根据它的父元素设置的宽度，也就是450px的50%，为225px。
2.接下来再讲一下top和bottom
这两个属性的值，其实也是根据父元素来定义的。
<div class="kk"> <div> <div></div> </div> </div>
现在给孙子元素加top属性，我们应该这样写：
.kk>div>div{ top: 100%; }
这个100%就是根据它的父元素定义的，这个代码意思就是说，最里面的div位置离它父元素div的下边框距离是100%，位置在父元素下面，也就是说离它父元素的距离等于它父元素的高。
同理bottom设置100%，就是离它父元素上边框距离是100%，位置在父元素上面。
