520立时就要到,作为程序员的你是不是也想送个特殊的礼物。
本日给大家分享一个HTML5+CSS3+jQuery实现的情侣浪漫表白JS殊效,视觉效果还是相称不错!
得此表白神器,程序猿也可以很浪漫!
快去追你的女神吧,把这个告白爱心动画发给你心爱的她!

​实现的功能

这个殊效紧张实现了这几个功能,功能一基于jQuery实现的笔墨打印动态效果,笔墨的颜色个样式通过定义不同的CSS样式来掌握的。
功能二动态天生随机的花瓣并拼成一个爱心图案,通过prototype属性向工具添加属性和方法。
功能三爱心中的笔墨淡入显示,这个紧张是利用了fadeIn方法来实现。
末了一个功能便是当点击接管时开始计时功能,通过new Date()获取当前韶光再把韶光差转换为天数、小时数、分钟数和秒数显示即可。

​笔墨打印动态效果

这里的d.html(c.substring(0,b)+(b&1?"_":""))是为了实现打印的动态效果了,当下标index为奇数的时候末了一个字符显示为"_",当为偶数的时候显示" ",这样就能形成打印笔墨的那种动态效果。

html5浪漫特效代码520情侣浪漫剖明JS特效分享附源码 Java

动态天生花瓣爱心

这里紧张的功能便是创建矢量线,见告我们花瓣的走向。
接着再绘制随机天生的花瓣图案,末了再加上着花的效果。
这里的Vector方法绘制了爱心的大致形状,Petal方法则卖力绘制随机天生的花瓣,Bloom方法则定义了花瓣的绽放效果。
Garden方法为花园入口,卖力参数选项配置选项及方法调用以实现爱心图案的天生。

笔墨淡入显示

在爱心中间的字体采取了淡入的效果,这里我们可以通过jQuery封装的fadeIn()方法实现淡入效果来显示一个隐蔽的元素。
笔墨默认样式通过CSS定义为隐蔽状态,fadeIn()由两个参数分别是speed(速率)和callback(回调函数)。
当花瓣爱心绘制完成之后我们调用fadeIn方法显示爱心中的内容,回调中连续显示loveu中的内容。

计时器功能实现

当链接被点击的时候触发timeElapse方法开始计时,这里获取了当前的韶光并对韶光进行了换算为天数、小时数、分钟数和秒数显示。
parse()方法可解析一个日期韶光字符串,并返回 1970/1/1 午夜间隔该日期韶光的毫秒数。
floor()方法则是对一个数进行向下取整打算,返回的是小于或即是且最靠近打算值的整数。

总结:

源码解释:本例中的源码非本人创作,本文仅作大略的解析和分享。
须要源码的朋友可以在评论区留言,本源码仅限学习参考请勿它用。
以上内容是