JavaScript实现简单的弹窗效果

本文实例为大家分享了Javascript实现弹窗效果的具体代码，供大家参考，具体内容如下

使用css动画效果实现弹窗缓慢弹出和收回。

使用Javascript实现定时弹出定时收回。

  
  
  
    * {
      margin: 0;
      padding: 0;
    }
    .pop {
      width: 400px;
      height: 300px;
      position: fixed;
      bottom: 0;
      right: 0;
      display: none;
      animation: pop 1s ease-in-out 0s;
    }
    @keyframes pop {
      from {
 height: 0;
      }
      to {
 height: 300px;
      }
    }
    .down {
      width: 400px;
      height: 0;
      position: fixed;
      bottom: 0;
      right: 0;
      display: block;
      animation: out 1s ease-in-out;
    }
    @keyframes out {
      from {
 height: 300px;
      }
      to {
 height: 0;
      }
    }
    .img1 {
      width: 400px;
      height: 300px;
      vertical-align: top;
    }
  



  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。