最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

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

IT培训 admin 2浏览 0评论

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

作者:刘辉 撰写时间:2019.1.21

先上张图:

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

然后再到JavaScript中的融合点击事件去引用:(注:con2为图片一(女生),con3为图片二(男生))

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

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

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

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


这样一个简单的图片融合与分开就完成了。(新人报道,望各位大佬海涵!!!)

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

作者:刘辉 撰写时间:2019.1.21

先上张图:

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

然后再到JavaScript中的融合点击事件去引用:(注:con2为图片一(女生),con3为图片二(男生))

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

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

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

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


这样一个简单的图片融合与分开就完成了。(新人报道,望各位大佬海涵!!!)

11136
发布评论

评论列表 (0)

  1. 暂无评论