使用css让盒子在视野消失!n种方法!

时间:2021-09-15
本文章向大家介绍使用css让盒子在视野消失!n种方法!,主要包括使用css让盒子在视野消失!n种方法!使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        box-sizing: border-box;
      }
      .container {
        width: 400px;
        background-color: antiquewhite;
        height: 300px;
        /* 不改变位置隐藏 */
        display: none;
        visibility: hidden;
        opacity: 0;
        filter: opacity(0%);
        width: 0;
        transform: scale(0);
        /* 添加伪元素 */
        /* 移动到视野外 */
        margin-left: -100px;
        transform: translateX(-100%);
        position: relative;
        top: -100%;
      }
      .hidden {
        position: relative;
      }
      .hidden::after {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div class="container hidden">Hello I'm container</div>
  </body>
</html>

原文地址:https://www.cnblogs.com/dingtongya/p/15271074.html