PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

前言

2022虎年春节假期在一场大雪中就这样结束了，开工的第一天，看着大家都在朋友圈秀开工红包，我默默的掏出手机看了一眼公司群，没有任何的动态，寂静的如一潭死水（领导也不多少意思一下）

年前立下的flag，在年后的第一天显得那么苍白无力。明明代码就在眼前却懒得看它一眼，就在臃散的快要躺下的时候，突然手机收到了房贷的短信，心情咯噔一下。一个莫名的词从脑海中蹦出“打工人，打工魂”。得了，还是要继续奋斗，既然没有收到开工红包，就自己搞个鸡汤红包激励下自己吧！

准备

先找个红包封面的图片，然后稍微修饰下就做当做红包封面。

收集一些新年开工的鸡汤文案（自己也掺着写点）。

开工

先简单创建个div，把红包封面图片放进去。

再创建鸡汤文案的div

<div class="red"><img src="images/red.png"></div>
<div class="windows">
	<div class="text">开工大吉！</div>
	<div class="close"><img src="images/close.png"/></div>
</div>

然后创建红包封面的点击事件。这里用到了 [CSS动画@-webkit-keyframes] 抖动效果。

$(document).ready(function(){
	$(".red").click(function(){
		$(this).addClass("shake");
		var index = Math.floor((Math.random()*futturarr.length));
		$(".text").text(futturarr[index]);
		setTimeout(function(){
			$(".red").removeClass("shake");
			$(".windows").fadeIn();
			$(".opacity").fadeIn();
		},2000);
	});
	$(".close").click(function(){$(this).parent().fadeOut();$(".opacity").fadeOut()})
});

就这样，一个简单的鸡汤红包效果就出来了。

效果

来试试你的开工红包吧！ 开工红包

鸡汤虽好,多喝却会让你不能思考

做好自己才是最重要的