css高级弹窗动画效果

css高级弹窗效果：

html:

    <div class=”popup-box”>
<div class=”demo”>
<a href=”javascript:;” class=”bounceIn”><span>活动规则</span</a>
</div>

<div id=”dialogBg”></div>
<div id=”dialog” class=”animated”>
<img class=”dialogIco” width=”50″ height=”50″ src=”images/notify.png” alt=”” />
<div class=”dialogTop”>
<a href=”javascript:;” class=”claseDialogBtn”>关闭</a>
</div>
<div>
<p class=’dialogContent’><br>活动说明
</p>
</div>
</div>
</div>

css:

/* 弹窗效果 */

@CHARSET “UTF-8”;
body{
font:.85em/1.4 “微软雅黑”,”Microsoft Yahei”,’Arial’,’san-serif’;
color:#666;
margin:0;
padding:0
}
img{
max-width:100%;
height:auto;
width:auto9;
-ms-interpolation-mode:bicubic;
vertical-align:middle
}
a,button,input{
-webkit-tap-highlight-color:rgba(255,0,0,0)
}
input{
border:0 none;
-webkit-appearance:none
}
ul,p{
padding:0;
margin:0
}
h1,h2,h3,h4,h5,h6{
margin:0;
font-weight:100
}
ul,li{
list-style:none
}
a{
color:#666
}
a,a:hover{
text-decoration:none
}
a:focus{
outline:none
}

.animated{
-webkit-animation-duration:1.4s;
animation-duration:1.4s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
}

@-webkit-keyframes bounceIn{
0%{
opacity:0;
-webkit-transform:scale(.3);
transform:scale(.3)
}
50%{
opacity:1;
-webkit-transform:scale(1.05);
transform:scale(1.05)
}
70%{
-webkit-transform:scale(.9);
transform:scale(.9)
}
100%{
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}

}
@keyframes bounceIn{
0%{
opacity:0;
-webkit-transform:scale(.3);
-ms-transform:scale(.3);
transform:scale(.3)
}
50%{
opacity:1;
-webkit-transform:scale(1.05);
-ms-transform:scale(1.05);
transform:scale(1.05)
}
70%{
-webkit-transform:scale(.9);
-ms-transform:scale(.9);
transform:scale(.9)
}
100%{
opacity:1;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1)
}

}
.bounceIn{
-webkit-animation-name:bounceIn;
animation-name:bounceIn
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

/*——————- 华丽分割线 ———————–*/

header{width:90%;text-align:center;padding:5%;letter-spacing:2px;color:#333;font-size:1.2em;text-shadow:0 0 2px #999;}
.demo{width:100%;margin:0 auto;text-align:center;}
.demo a{margin:0 5px 20px;background-color:#eee;}

/*——————- 华丽分割线 ———————–*/
.popup-box{padding:10px 0 20px 0;}
#dialogBg{width:100%;height:100%;background-color:#000000;opacity:.6;filter:alpha(opacity=60);position:fixed;top:0;left:0;z-index:9999;display:none;}
#dialog{width:80%;height:50%;margin:0 auto;display:none;background-color:#ffffff;position:fixed;top:20%;left:10%;z-index:10000;border:1px solid #ccc;border-radius:10px;-webkit-border-radius:10px;box-shadow:3px 2px 4px #ccc;-webkit-box-shadow:3px 2px 4px #ccc;}
.dialogTop{width:90%;margin:0 auto;border-bottom:1px dotted #ccc;letter-spacing:1px;padding:10px 0;text-align:right;}
.dialogIco{width:50px;height:50px;position:absolute;top:-25px;left:50%;margin-left:-25px;}
.dialogContent{font-size:12px;text-align:left;white-space:normal;overflow-x:hidden;overflow-y:scroll;width:96%;height:80%;left:2%;position:absolute;}
.editInfos{padding:15px 0;}
.editInfos li{width:90%;margin:8px auto auto;text-align: center;}
.ipt{border:1px solid #ccc;padding:5px;border-radius:3px;-webkit-border-radius:3px;box-shadow:0 0 3px #ccc inset;-webkit-box-shadow:0 0 3px #ccc inset;margin-left:5px;}
.ipt:focus{outline:none;border-color:#66afe9;box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);}
.submitBtn{width:90px;height:30px;line-height:30px;font-family:”微软雅黑”,”microsoft yahei”;cursor:pointer;margin-top:10px;display:inline-block;border-radius:5px;-webkit-border-radius:5px;text-align:center;background-color:#428bca;color:#fff;box-shadow: 0 -3px 0 #2a6496 inset;-webkit-box-shadow: 0 -3px 0 #2a6496 inset;}
.demo span{text-decoration:underline;color:red;font-size:20px;font-size:bold;}

js:

/*弹窗效果js插件*/

var w,h,className;
function getSrceenWH(){
w = $(window).width();
h = $(window).height();
$(‘#dialogBg’).width(w).height(h);
}

window.onresize = function(){  
getSrceenWH();
}  
$(window).resize();  

$(function(){
getSrceenWH();

//显示弹框
$(‘.popup-box a’).click(function(){
className = $(this).attr(‘class’);
$(‘#dialogBg’).fadeIn(300);
$(‘#dialog’).removeAttr(‘class’).addClass(‘animated ‘+className+”).fadeIn();
});

//关闭弹窗
$(‘.claseDialogBtn’).click(function(){
$(‘#dialogBg’).fadeOut(300,function(){
$(‘#dialog’).addClass(‘bounceOutUp’).fadeOut();
});
});
});