style:
<style type="text/css">
.active-btn {
width:60px;
height:60px;
background:url(images/activtiy-btn-bg.png) no-repeat center;
background-size:100% 100%;
position:fixed;
top:50%;
right:20px;
animation: tada 5s linear infinite backwards;
}
.model {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index:99;
display:none;
}
.model .close{
width:40px;
height:40px;
position:absolute;
right:20px;
top:20px;
z-index:999;
}
.model .mark {
width: 100%;
height: 100%;
position: fixed;
top:0;
left:0;
z-index:2;
box-sizing: border-box;
overflow: hidden;
background-color: rgba(0, 0, 0, .65);
display: -none;
}
.model .run-bg {
width:500px;
height:500px;
background: url('images/run.png') no-repeat center;
position:absolute;
top:40%;
left: 50%;
margin-left:-250px;
margin-top:-250px;
animation: circle 10s linear infinite;
}
.model .box {
width: 500px;
height: 450px;
padding-top: 10px;
position: absolute;
top: 30%;
left: 50%;
z-index: 9;
margin-left: -250px;
margin-top: -225px;
-webkit-animation: showModal .5s ease-in-out;
animation: showModal .5s ease-in-out;
}
.model .box .list{
background:url(images/activtiy-bg1.png) no-repeat center top;
background-size:100% 70%;
width:340px;
height:300px;
overflow:hidden;
padding-top:0;
margin:0 auto;
transform: translate(0, 80px);
animation: move .05s linear .04s forwards;
-webkit-animation: move .05s linear .04s forwards;
}
.model .box .list .content-bg{
width:277px;
height:130px;
background:url(images/activtiy-bg2.png) no-repeat center top;
background-size:100% 100%;
margin:80px auto 0;
}
.model .box .detail{
width:300px;
height:120px;
background:url(images/detail-bg.png) no-repeat center bottom;
background-size:100% 100%;
margin:-110px auto 0;
position:relative;
z-index:10;
text-align:center;
color:#fff;
}
.model .box .detail .tit{
position:absolute;
top:-5px;
left:50%;
transform:translateX(-50%);
}
.model .box .detail .txt{
position:absolute;
top:25px;
left:50%;
z-index:8;
transform:translateX(-50%);
}
.model .box .detail .btns{
width:210px;
height:36px;
line-height:30px;
background:url(images/btns-bg.png) no-repeat center;
background-size:100%;
position:absolute;
bottom:15px;
left:50%;
z-index:8;
margin-left:-105px;
transform:translateX(-50%);
animation:switch .8s linear infinite alternate;
}
@keyframes circle {
0% {
transform: rotate(0)
} 100% {
transform: rotate(360deg)
}
}
@keyframes showModal {
0% {
transform: scale(.1);
-webkit-transform: scale(.1);
} 100% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@keyframes tada {
5% {
webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
}
6%,8%,10%,12% {
transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,10deg);
-webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,10deg);
}
7%,9%,11% {
transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-10deg);
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
}
13% {
transform: scale3d(1,1,1);
-webkit-transform: scale3d(1,1,1);
}
}
@-webkit-keyframes tada {
5% {
webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
}
6%,8%,10%,12% {
transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,10deg);
-webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,10deg);
}
7%,9%,11% {
transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-10deg);
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
}
13% {
transform: scale3d(1,1,1);
-webkit-transform: scale3d(1,1,1);
}
}
@keyframes move {
0% {
transform: translate(0, 80px);
-webkit-transform: translate(0, 80px);
}
100% {
transform: translate(0,0);
-webkit-transform: translate(0,0);
}
}
@keyframes switch {
0% {
transform: scale(.88)
}
100% {
transform: scale(1.1)
}
}
</style>
Html:
<div class="active-btn">活动</div>
<div class="model">
<div class="mark"></div>
<div class="close">关闭</div>
<div class="run-bg"></div>
<div class="box">
<div class="list">
<div class="content-bg"></div>
</div>
<div class="detail">
<p class="tit">恭喜你获得了</p>
<p class="txt">50代金券</p>
<div class="btns">立即领取</div>
</div>
</div>
</div>
Script:
$('.active-btn').click(function(){
$('.model').show();
})
$('.close').click(function(){
$('.model').hide();
})
效果: