7种效果的酷炫弹窗

一款7种效果的酷炫弹窗特效，每一种都有不同的动画效果，按钮里面的文字已基本说明了动画方式了，每一种动画方式都可以自由调整的，可以在控制台里面修改样式立即查看效果，喜欢的童鞋请收下吧。

分类：图片代码 > 遮罩层难易：初级

查看演示下载资源下载积分： 30 积分

页面的head部分，需设置好页面元素的样式，由于样式代码较多，这里仅贴出部分代码：

<style type="text/css">
* {
  box-sizing: border-box;
  margin: 0;
}

html, body {
  min-height: 100%;
  height: 100%;
  background-image: url(images/bg.jpg);
  background-size: cover;
  background-position: top center;
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  font-weight: 200;
}
html.modal-active, body.modal-active {
  overflow: hidden;
}

#modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 1;
}
#modal-container.one {
  transform: scaleY(0.01) scaleX(0);
  animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one .modal-background .modal {
  transform: scale(0);
  animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one.out {
  transform: scale(1);
  animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one.out .modal-background .modal {
  animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two {
  transform: scale(1);
}
#modal-container.two .modal-background {
  background: transparent;
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two .modal-background .modal {
  opacity: 0;
  animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two + .content {
  animation: scaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two.out {
  animation: quickScaleDown 0s .5s linear forwards;
}
#modal-container.two.out .modal-background {
  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two.out .modal-background .modal {
  animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two.out + .content {
  animation: scaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.three {
  z-index: 0;
  transform: scale(1);
}
#modal-container.three .modal-background {
  background: rgba(0, 0, 0, 0.6);
}
#modal-container.three .modal-background .modal {
  animation: moveUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.three + .content {
  z-index: 1;
  animation: slideUpLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.three.out .modal-background .modal {
  animation: moveDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.three.out + .content {
  animation: slideDownLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
/* 省略部分样式代码 */
</style>

页面的body部分，两个大的div容器，一个用来放弹窗内容，另一个则用来放7个触发按钮，代码如下：

<div id="modal-container">
  <div class="modal-background">
    <div class="modal">
      <h2>弹窗标题</h2>
      <p>弹窗说明文字</p>
      <svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
			  <rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
			</svg>
    </div>
  </div>
</div>
<div class="content">
  <h1>7种效果的酷炫弹窗</h1>
  <div class="buttons">
    <div id="one" class="button">展开收缩</div>
    <div id="two" class="button">缩放遮罩</div>
    <div id="three" class="button">底部滑入</div>
    <div id="four" class="button">渐隐缩放</div><br>
    <div id="five" class="button">左进右出</div>
    <div id="six" class="button">画出窗口</div>
    <div id="seven" class="button">由圆到方</div>
  </div>
</div>

页面的底部，需远程调用jQuery库，并引入本地的JS文件，代码如下：

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>