2020-10-23

最新推荐文章于 2020-10-24 00:30:18 发布

原创最新推荐文章于 2020-10-24 00:30:18 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客总结了创建遮罩层样式的步骤，包括设置大盒子的长高、边框、定位和背景色，以及使用相对定位和overflow属性。通过对比不同背景色的盒子，介绍了如何使用绝对定位和过渡效果transition来实现平滑的top变化和透明度过渡。在:hover状态下，进一步展示了如何应用这些效果。

遮罩层样式小结

先定义一个大盒子长高边框定位父盒子为相对定位清除浮动overflow：hidden；设置背景颜色
然后再定义一个盒子和上面的盒子条件一样但为方便对比要设置不同的背景颜色使用决对定位在使用过度transition：top 2s，opacity 2s；top变化时要经过两秒
再在第二个盒子那使用hover同样使用在这里插入图片描述