css3 抽奖实现炸弹爆炸效果 卡片翻转效果 雪花效果

一、业务背景:

最近接了一个“扎水球”的小程序项目,用户使用“金针”扎破水球,可以扎到奖励,或者扎到炸弹,其实也可以看作是一次抽奖,扎破水球后,显示对应的奖励。关于页面样式及扎水球后的结果,UI同学给了下面两张图:

css3 抽奖实现炸弹爆炸效果 卡片翻转效果 雪花效果_第1张图片
经过我的一番“添油加醋”后,做出的效果是下面这样的,感谢UI同学,给了我自由发挥的空间,让我又提起“笔”,写了这篇博客。

css3 抽奖实现炸弹爆炸效果 卡片翻转效果 雪花效果

二、卡片翻转效果

抽完奖后,直接把奖励显示出来,这样做效果太一般,而且也没有悬念(好歹我们也是个游戏公司,得对得起这个行业)。在这里,我能想到最简单的效果就是卡片翻转了。来个对比吧,看完后,是不是瞬间就觉得卡片翻转的效果要好很多。


这里用到的几个知识点:

  • transform: rotateY(180deg),将图片进行水平翻转。
  • animation-fill-mode: forwards ,当动画结束后,停留在最后一帧。
  • backface-visibility: hidden,用来设置当元素背面向屏幕时是否可见。

页面结构代码:

<view class="img_box">
	<image class="zhengImg rotateAmview" src="./assets/blue.png" />
	<view class="fanImg rotateAmview">
		<image class="img" src="./assets/[email protected]" />
		<text class="num">x1text>
	view>
view>

css样式代码:

.img_box {
	width: 77rpx;
	height: 77rpx;
	position: relative;
}
.zhengImg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	backface-visibility: hidden;
}
.fanImg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	//因为这里用的是Png图,正反面在一起没有重叠的部分就会露出来,所以加了透明度为0
	opacity: 0;
}
.img {
	width:100%;
	height: 100%;
	transform: rotateY(180deg);
}
.num {
	position: absolute;
	left: 5rpx;
	bottom: 5rpx;
	color: #fff;
	font-size: 19rpx;
	transform: rotateY(180deg);
}
.rotateAmview {
	animation: rotateAm 0.5s linear;
	animation-fill-mode: forwards;
}
@keyframes rotateAm {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(180deg);
		opacity: 1;
	}
}

三、礼花效果(雪花效果)

记得刚开始工作的时候,最经典的一道题就是用js面向对象写雪花效果。用一张最小单元的雪花的图片,随机大小、随机位置、随机速度,飘满了屏幕,此刻回想起来也是很开心的。现在我们可以用一张png图片来搞定这个效果。


这里用到的就是下面这张图,其原理就是把这张透明图当成背景,不断改变它的 background-position ,然后通过 animation 设置无限循环(如果换成雪花的图片,就可以实现下雪的效果)。
css3 抽奖实现炸弹爆炸效果 卡片翻转效果 雪花效果_第2张图片
注意:如果是PC端的项目,记得兼容各个浏览器,-webkit- 等前缀要用起来。

页面结构代码:

<view class="popup_wrap">
    <view class="popup_title">恭喜获得view>
   	
    
	<view class="snow-animation" style='background-image: url("./assets/snow.png");'>view>
view>

css代码:

.popup_wrap{
	width:300rpx;
	height:300rpx;
	position: relative;
}
.snow-animation {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	animation: snow 3s linear infinite;
	pointer-events: none; //设置击穿,此盒子下面的任何点击划过等交互事件,可以正常显示
}
@keyframes snow {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 100px 1000px;
	}
}

四、爆炸效果

讲完了抽奖和抽到奖品,接下来该是抽到炸弹了。炸弹的出现,我想的是让它从页面的中间,从小到大(用到 scale )显示出来后,再左右抖动(用到 rotate )两下。写的过程中,不停地修改值尝试效果, 发现如果把 scale 的值设置一定大,再把透明度设成0,这不就是“炸开”的效果了,就像下面这样。

css3 抽奖实现炸弹爆炸效果 卡片翻转效果 雪花效果_第3张图片
写完上面的效果,该去做核酸了。在楼下排队做核酸的时候,我一直在想,爆炸的效果已经有了,可是感觉这个爆炸效果太过于苍白无力,怎样能让效果更震憾呢,我想到了可以给屏幕加“闪白”的效果,后来觉得还不够,又给页面加了“抖动”的效果,这样跟上面对比是不是好多了。(其实也想说,工作的时候,不要一直埋头苦干,偶尔站起来走走,离开那个固定的思维圈,换个角度去想,也许就会有更好的想法。)

4.1 炸弹效果

使用 scale 和 rotate 结合,就可以实现炸弹在爆炸前的晃动,结构代码:

<image class="img" src="./assets/[email protected]" />

css样式代码:

.img {
	width: 200rpx;
	height: 200rpx;
	animation: bomb 3s both;
}
@keyframes bomb {
	0% {
		transform: scale(0, 0);
	}
	60% {
		transform: scale(1, 1) rotate(-3deg);
		opacity: 1;
	}
	70%,73% {
		transform: scale(0.9) rotate(3deg);
	}
	77%,83%,90%,97% {
		transform: scale(1.1) rotate(-3deg);
	}
	80%,87%,93% {
		transform: scale(1.3) rotate(3deg);
		opacity: 1;
	}
	100% {
		transform: scale(10) rotate(0);
		opacity: 0;
	}
}

4.2 页面的抖动和白屏

页面的抖动是控制最外层的元素小幅度旋转,白屏效果是控制遮罩层的背景色从黑到白再到黑,实际在写的时候,还要考虑卡片翻转的时间、炸弹炸开的时间、页面什么时候开始抖动,各种动效怎样衔接。

//页面抖动
.tremble {
	animation: trembleAni 1s linear 3s;
}
@keyframes trembleAni {
	0% {
		transform: rotate(0);
	}
	10%,30%,50%,70%,90% {
		transform: rotate(1deg);
	}
	20%,40%,60%,80% {
		transform: rotate(-1deg);
	}
	100% {
		transform: rotate(0);
	}
}
// 页面白屏
.bomb_mask {
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2;
	animation: maskChange 1s linear 3s;
}
@keyframes maskChange {
	0% {
		background-color: rgba(0, 0, 0, 0.7);
	}
	30% {
		background-color: rgba(255, 255, 255, 0.85);
	}
	100% {
		background-color: rgba(0, 0, 0, 0.7);
	}
}

五、结束

做这个需求的时候感觉像是打了鸡血,特别亢奋。一方面在想该做成什么效果,一方面在想怎样去实现这个效果。基本上自己想到的都实现了,有小小的成就感。

写博客的时候,又去看了一遍需求文档,好吧,文档里写的是“用户使用金针扎水球,水球炸开之后,展示对应奖励。”额…,我这个卡片翻转好像不太符合“炸开”的效果,不过炸弹都能炸开了,水球还炸不开么,哈哈哈,感兴趣的小伙伴自己改改吧~

你可能感兴趣的:(css案例,css3,小程序,html5)