当前位置:首页 »“秋了秋”个人博客 » 前端编程 » 仿支付宝客户端的咻一咻

仿支付宝客户端的咻一咻

作者:秋了秋 发表时间:2016年02月01日

最近支付宝里面的咻一咻抽红包挺火的,主要运用的是css3技术实现,试着自己做了一个,代码如下:

<div class='xiu_txt'></div><div class='xiu_pay' id='xiu_pay'>
</div>
<style>
@keyframes scale{0%,100%{transform:scale(1.1);}50%{transform:scale(1.3);}}
@keyframes scale2{
0%{transform:scale(1.1);}
50%{transform:scale(5);opacity:0;}
100%{transform:scale(1.1);opacity:0;}
}
.xiu_pay{
width:80px;
height:80px;
background:#DC3B58;
border-radius:50%;
margin:0 auto;
position:relative;
transition:all .5s;
}
.xiu_pay:before{
position:absolute;
content:'';
width:100%;
height:100%;
box-shadow:inset 0 0 5px 1px #ECBAD3;
border-radius:50%;
transform:scale(1.1);
border:1px solid #EFB0CD;
top:-1px;
left:-1px;
animation:scale 2s infinite;
}
.xiu_pay.scale:before{
position:absolute;
content:'';
width:100%;
height:100%;
box-shadow:inset 0 0 5px 1px #ECBAD3;
border-radius:50%;
transform:scale(1.1);
border:1px solid #EFB0CD;
top:-1px;
left:-1px;
animation:scale2 3s;
}
.xiu_txt{
margin:50px 0 30px 0;
height:30px;
text-align: center;
color: #EAB387;
}
</style>
<script>
var go=true;
$('#xiu_pay').click(function(){
       if(go){
	var arr=['咻咻大神,请赐予我力量吧','世界那么大,我想咻一咻','世界那么大,我想咻一咻','憋说话,咻我','一起扭着咻一咻!扭着!扭着!','咻咻咻咻,鸡鸭鱼肉','福来了醉,福来了喜天降','','别急,深呼吸三秒,给运气充个值','左手再来一个慢动作,咻着','重要的事说三遍:咻我,咻我,咻我','换个姿势继续咻一咻','红包哪里逃','像咻街机一样咻你手机','让我们红尘作伴,咻得潇潇洒洒','咻得太腻害了,快快收下我的膝盖','你不是一个人在咻嘛','这个咻姿势我给满分','耶耶切克闹,福气红包来一套','五魁首,六六六,咻个福气一起走','有钱有福,猴嗨森','满园春色关不住,福气红包咻出来','艾玛,红包咋还不来呢','世界那么大,我想咻一咻','福来了美,福来了浪啊~','咻咻咻咻,福气满堂','福来了肥,福来了烫啊','感情深一口气,哥俩好分福气','大王派我来拜年嘞,咻咻咻咻'];
	var length=arr.length;
	var txt=arr[Math.floor(Math.random()*length+1)];
	$('.xiu_txt').html('   正在寻宝中...');
	$(this).addClass('scale').css('transform','scale(1.1)');
	setTimeout(function(){
		$('.xiu_pay').css({'transform':'scale(1)'});
	},500);
	setTimeout(function(){
                go=true;
		$('.xiu_pay').removeClass('scale');
		$('.xiu_txt').html(txt);
                if($('.xiu_txt').html()!='   正在寻宝中...'){
                setTimeout(function(){$('.xiu_txt').html('');},1000);}
		if(txt==""){
			alert('你中大奖了')
		}		
	},1200);
      go=false;
    }
})</script>

少了个背景图片和背景音乐,可自行添加。

0
文章作者: “秋了秋”个人博客,本站鼓励原创。
转载请注明本文地址:http://www.mizuiren.com/blog/431.html
目录: 前端编程标签: 咻一咻 8024次阅读

请求播放音乐,请点击播放

登 录
点击获取验证码
还没账号?点击这里