当前位置:首页 > 表白创意 > 教程:漂亮炫酷的爱心表白HTML5网页动画

教程:漂亮炫酷的爱心表白HTML5网页动画

下面跟大家分享2个基于HTML5网页技术实现的浪漫爱心表白动画,漂亮炫酷的动态爱心视觉效果能让表白变得更有创意。喜欢的童鞋可以动手diy,也可以去定制,添加自己想要的照片文字,拿去送给喜欢的人。

 

第一种:名字+爱心,适合在电脑上玩的惊喜

话不多说,先看第1种更简单一点的,可以写上你表白对象的名字,名字周围即会出现许多闪亮的爱心,并围绕成一个大的爱心,大爱心会跟随鼠标一起旋转,动画效果非常不错。点这里看效果吧。【电脑上点开】

可惜这个表白动画只适合在电脑上播放,手机上显示不出鼠标跟随的效果,大打折扣。懂编辑的朋友也许可以改一下触发事件,把鼠标跟随改为重力感应,或许手机上也能播放哦。这里先上截图。

教程:漂亮炫酷的爱心表白HTML5网页动画-异地恋可用 1

 

源码在这里下载,喜欢的朋友可以下载试试。下面是使用教程——懂网络或编辑的可以无视这部分教程,直接把代码上传到服务器即可使用。

1,下载之后是个压缩包,直接解压,得到一个“3D_love”的文件夹。

2,双击打开“3D_love”,里面有一个“js”的文件夹,以及一个index.html。

3,双击index.html就可以在浏览器中看到效果了。这时候爱心里面默认显示的是“Love U”。

教程:漂亮炫酷的爱心表白HTML5网页动画-异地恋可用 2

4,爱心里面的“Love U”,是可以改成ta的英文名哒。方法也非常简单,鼠标右键点击index.html,选择用记事本打开,然后同时按CTRL+H,把“LOVE U”替换为ta的英文名就可以啦。 注意中文名会出错,估计是编码的问题。

 

浪漫表白的小技巧

可以把“3D_love”里面的 “js”的文件夹,以及index.html 同时剪切, 粘贴放在ta的电脑桌面。然后 index.html 可以重命名为“新浪新闻”,哈哈,就是伪装成ta可能会打开的页面。这样就可以让ta在不经意之间发现惊喜哦。

异地恋的朋友也可以在用QQ发文件时,带上这两个文件一起发送给对方,可以来玩个小浪漫哦。

 

 

第二种:爱心许愿树+计时器,手机上也能玩的惊喜

这种创意在手机上也能玩起来,所以可能更实用,它是基于html5 canvas、jquery.min.js和love.js等插件制作的爱情表白动画网页。动画效果非常惊艳,可以用优秀来形容。请看案例。

童鞋们可以扫描下面的二维码看看效果。最开始出现的是一个小心心,点击之后会变成种子落入土中,奇妙地生根发芽,慢慢成长为一棵爱心大树,不断地飘落爱心树叶。然后会有文字以打字效果出现。更有意思的是,下面还有一个纪念日计时,逐秒逐分地自动显示不断变化的在一起的时间。

许愿树的文字播放完之后,会自动播放h5音乐相册,图片文字依次出现,整个过程自然而流畅,创意十足,富有表现力。非常适合生日、表白使用。

教程:漂亮炫酷的爱心表白HTML5网页动画-异地恋可用 3

如何制作创意表白html5网页动画?

想要自己动手做的,可以在网页打开之后,下载网页的源码,把里面的内容改成自己想要的,然后就可以像上第1种那样使用了。不过这种会更复杂,需要有编程基础才能操作。

没有编辑基础的,可以到万能的某宝去定制。下面推荐的这家小店的二维码非常强大,不仅支持内容自定义,还有很多模板,还支持无限修改更新,支持加密。

 

本文部分内容转载自 boringlifesucks.com

 

爱特兔,分享表白方式、求婚创意、个性礼物、浪漫情书,还有情侣必备的惊喜攻略哦。欢迎收藏我们,或者订阅我们哦。

教程:漂亮炫酷的爱心表白HTML5网页动画:等您坐沙发呢!

发表评论

表情
还能输入210个字