这是我参与「掘金日新计划 · 4 月更文挑战」的第26天，点击查看活动详情。
又怎能为万世开太平
最近马老板想收购的可口可乐的消息工友皆知，如果马老板去不成火星，那他制造出一个可乐星球是不是也有可能【狗头】，那今天就制作一个火星爆炸的css动画。
部分代码展示
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script src="index.js"></script>
</body>
</html>
margin: 0;
padding: 0;
}
body{
background: black;
}
#box{
position:absolute;
left:50%;
top:50%;
border-color:red;
}
//click触发爆炸效果
//判断出一个大的div中每一个小块的位置，对他们进行旋转的操作
}
思路展示
既然是火星爆炸，那么肯定需要先有一张火星图片
然后把火星的图片，用js动作做出爆炸的特效，之后背后再来一张可乐，我们就算大功告成啦！【可乐的图片没有版权图片就不加了】
文章的整体思路是，既然是一整个图形，想让其出现爆炸的效果，那么我们不妨把一个大的图形分成几个小部分，当我们的鼠标悬浮到图片的时候，就让每一个小图片进行旋转，速度快一些，且每一个小块变化的方向不同，那么就可以显示出的是一个炸裂的效果啦。
也可以使用for循环遍历每一个小盒子的位置，让他们实现2d/3d旋转的效果。最后就可以呈现小火星爆炸的效果啦~
