（CSS效果）悬浮上拉

最新推荐文章于 2023-02-09 16:33:38 发布

涌93

最新推荐文章于 2023-02-09 16:33:38 发布

阅读量271

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/weixin_60519715/article/details/125497690

版权

动图效果展示

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<style type="text/css" media="all">
  .center{
    width: 200px;
    height: 500px;
    margin: 50px auto;
	/* 子选择器宽高溢出时隐藏 */
    overflow: hidden;
  }
  
  .top{
    width: 200px;
    height: 500px;
    background: yellow;
  }
  
  .bottom{
    width: 200px;
    height: 500px;
    margin: -100px 0;
    background: blue;
  }
  
  .bottom:hover{
    width: 200px;
    height: 500px;
    background: blue;
    margin: -500px 0;
	/* 脱离标准文档流，产生浮动效果 */
    position: absolute;
  }
  
</style>

<body>
  <div id="container">
      <div class="center">
        <div class="top">我的背景是黄色的</div>
        <div class="bottom">我的背景是蓝色的</div>
      </div>
  </div>
</body>

</html>