100字范文 > css3 抽奖实现炸弹爆炸效果卡片翻转效果雪花效果

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

时间：2020-07-06 23:25:56

一、业务背景：

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

经过我的一番“添油加醋”后，做出的效果是下面这样的，感谢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/icon_bomb@2x.png" /><text class="num">x1</text></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图，正反面在一起没有重叠的部分就会露出来，所以加了透明度为0opacity: 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设置无限循环（如果换成雪花的图片，就可以实现下雪的效果）。

注意：如果是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，这不就是“炸开”的效果了，就像下面这样。

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

4.1 炸弹效果

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

<image class="img" src="./assets/icon_bomb@2x.png" />

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