Css3 活动抽奖弹框

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010881899/article/details/81869467

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();
})

效果：