利用JavaScript和动画来实现图片的融合和分开的一个效果

利用JavaScript和动画来实现图片的融合和分开的一个效果

作者：刘辉 撰写时间：2019.1.21

先上张图：

如图所示，在经过各种css和HTML的设置后，我们见到了这样的一个效果，接下来我们要实现的是：如何点击那个融合按钮让两张图片融合成一张图片呢？说到点击我们肯定要用到点击事件，再配合css中的动画代码来实现这个过程； 下面是过程解释，
我们先在css中通过@keyframes来设置我们想让这两张图片移动的距离：

然后再到JavaScript中的融合点击事件去引用：（注：con2为图片一（女生），con3为图片二（男生））

引用以后我们得到一个这样的效果，它虽然会融合，但在融合以后很迅速的就分开了，没有保持融合的状态，那怎样才能使它们融合以后继续保持融合的状态呢？于是我们继续设置让图片的保持在融合的那个位置：

通过继续设置了以后我们就能够让这两张图片融合并保持了：

这样我们就能实现一个点击融合的一个效果，那能融合肯定也能分开，正所谓分久必合合久必分，于是我们又通过同样的方法来设置使图片分开的一个点击效果：
下面是点击事件完整的代码：

设置了以后我们去页面上看看效果，我们可以看到，当我们点击时就能融合并保持，当我们点击分开时就能分开；


这样一个简单的图片融合与分开就完成了。（新人报道，望各位大佬海涵！！！）