css3弹窗出现样式,简洁弹窗动画效果（jQuery，css3）原创

/*two*/

.clear {

clear:both;

}

p {

margin:0;

}

.marks {

width:100%;

height:100%;

background-color:#000;

opacity:0.5;

position:fixed;

top:0;

left:0;

display:none;

}

.popup,.popup2,.popup3 {

width:300px;

position:fixed;

top:20%;

left:50%;

margin-left:-150px;

background-color:#fff;

display:none;

animation:shake 1s;

}

.popup2 {

animation:mymove 1s;

}

.popup3 {

animation:contentSlipToBottom 1s;

}

.popup-top {

padding:10px 0;

box-sizing:border-box;

color:#000;

border-bottom:1px solid #0099ff;

margin:0 15px;

}

.popup-top p,.popup-top span {

float:left;

display:block;

width:50%;

text-align:right;

}

.popup-top span {

cursor:pointer;

}

.popup-top p {

text-align:left;

}

.popup-content {

padding:20px 25px;

text-align:center;

}

.pop-botton {

width:60%;

margin:0 auto;

margin-bottom:15px;

}

.pop-botton .ok {

width:48%;

float:left;

margin-right:4%;

color:#fff;

background-color:#0099ff;

cursor:pointer;

text-align:center;

border-radius:5px;

}

.pop-botton .cancel {

width:48%;

float:left;

background-color:#e7e7e7;

color:#000;

cursor:pointer;

text-align:center;

border-radius:5px;

}

/*动画*/

@keyframes shake {

0%,100% {

-webkit-transform:translateX(0);

}

10%,30%,50%,70%,90% {

-webkit-transform:translateX(-10px);

}

20%,40%,60%,80% {

-webkit-transform:translateX(10px);

}

}@keyframes mymove {

0% {

transform:scale(1);

}

50% {

transform:scale(1.1);

}

100% {

transform:scale(1);

}

}@keyframes contentSlipToBottom {

0% {

transform:rotateX(90deg);

}

100% {

transform:rotateX(0deg);

}

}