css设置动画效果（纯css实现自定义弹窗）

前言：

有必要先了解以下思路再进行代码的书写

思路

### 其实弹窗实现很简单： 1. 首先准备一个顶层div 将作为弹窗 设置z-index为一个比较大的值   
    
    
，如z-index=30


     


     


  ，使其置于顶层； 设置display:none 




 




 
，使初始被隐藏； 2. 添加锚定行为 定义一个a标签   

   

   

，使被点击时弹窗div被锚定

     

     

 ，会触发被锚定标签的“当前活动    
    
  ”伪类样式 3. 给弹窗div设置“当前活动    


     


     
”伪类样式
  




  




  ，即：弹窗div:target{css} 使其显示：display:block ​ 4. 给弹窗div添加一个子a标签  


  


  


，用于隐藏窗口 给这个子a标签href="#"         当点击后使弹窗div不为当前活动元素 
     
     
，从而使其target伪类样式不生效 ### 另外使整个网页背景虚化： 其实也是主要利用z-index来实现一个图层

   




   




   ，该图层尺寸占整个网页窗口尺寸    
    
  、有一定的透明度    


     


     
、在弹窗div中定义作为其子元素(使具有和弹窗相同的行为)

代码

<style>    html,body{        margin: 0;        padding: 0;        width: 100%;        height:100%;   }    .app{        width: 100%;        height: 100%;   }    .window{        position: fixed;        top: 0;        right: 0;        left: 0;        bottom: 0;        display: none;        background-color: rgba(0, 0, 0, 0.2);        z-index: 20;    /*背景层*/        text-align: center;   } ​    .window:target{        display: block; ​   }    .window_content{        width: 400px;        height: 400px;        margin: 15% auto;        z-index: 30;    /*置顶窗口层*/        background-color: pink;   } </style> ​ ​ ​ ​ <!-- 在这里设置一个弹窗 --> <div id="window" class="window">    <div class="window_bg"></div>    <div class="window_content">        <h1>MyWindow</h1>        <h2>hello world</h2>        <a href="#">关闭</a>    </div> </div> ​ <div class="app">    <button class="link">        <a href="#window">弹窗</a>    </button> </div>