2花瓣html,html花瓣飘落特效_520情侣浪漫表白JS特效分享（附源码）

520要来了，为回馈朋友们所有专栏8折优惠，感兴趣的朋友可以订阅，感谢大家的支持！

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

实现的功能

这个特效主要实现了这几个功能，功能一基于jQuery实现的文字打印动态效果，文字的颜色个样式通过定义不同的CSS样式来控制的。功能二动态生成随机的花瓣并拼成一个爱心图案，通过prototype属性向对象添加属性和方法。功能三爱心中的文字淡入显示，这个主要是利用了fadeIn方法来实现。最后一个功能就是当点击接受时开始计时功能，通过new Date()获取当前时间再把时间差转换为天数、小时数、分钟数和秒数显示即可。

文字打印动态效果

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

动态生成花瓣爱心

这里主要的功能就是创建矢量线，告诉我们花瓣的走向。接着再绘制随机生成的花瓣图案，最后再加上开花的效果。这里的Vector方法绘制了爱心的大致形状，Petal方法则负责绘制随机生成的花瓣，Bloom方法则定义了花瓣的绽放效果。Garden方法为花园入口，负责参数选项配置选项及方法调用以实现爱心图案的生成。

文字淡入显示

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

计时器功能实现

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

总结：

源码说明：本例中的源码非本人创作，本文仅作简单的解析和分享。需要源码的朋友可以在评论区留言，本源码仅限学习参考请勿它用。以上内容是小编给大家分享的【520情侣浪漫表白JS特效分享(附源码)】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考专栏：Vue实战系列，在此也非常感谢大家对小编的支持！

2花瓣html,html花瓣飘落特效_520情侣浪漫表白JS特效分享（附源码）相关推荐

美！视差滚动特效在图片滑块中的应用【附源码下载】
视差滚动(Parallax Scrolling)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果.下面分享的这个图片滑块效果是难得一见的结合视差滚动的例子,之前的文章给大 ...
【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）
卡塔尔世界杯元素python海龟绘图(附源代码) 世界杯主题前端特效5个(附源码)程序人生本文目录: 一.python turtle海龟绘图卡塔尔世界杯元素 (1).绘制效果图 (2).代码演示方法 ...
java幻灯片效果_Java实现多种幻灯片切换特效(附源码)
Java实现多种幻灯片切换特效(附源码)以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 功能说明代码实现了多种幻灯片变 ...
用python+pillow模块实现抖音晃眼睛的特效，图像处理之路（附源码）
前言利用Python实现抖音晃眼睛的特效,让我们愉快地开始吧~ 开发工具 Python版本: 3.6.4 相关模块: pillow模块: numpy模块: argparse模块: 以及一些Pytho ...
五个喜欢点赞图标动画特效（附源码，效果图）
第一种:采用放大缩小方式,形成动画效果 HTML: <!DOCTYPE html> <html lang="en" > <head><me ...
8种CSS3按钮动画特效【附源码】
这8款CSS3按钮动画特效.在该特效中,提供了8种按钮动画效果.每种动画在鼠标悬停到按钮上面的时候,都会触发按钮动画. 动画效果截图: 使用方法 HTML结构最简单的按钮HTML结构如下. < ...
html5 css3舞台灯光,HTML5特效库 CSS3 实现灯光照射显示文字动画源码
效果图各位朋友,大家好! 今天给大家带来的特效源码是 CSS3 实现灯光照射显示文字动画源码是不是很炫酷,大家可以按照自己的想法进行修改! 有想要文件版源码的可以私聊我废话不多说,上源码! CS ...
【CSS特效扫盲】精选40种纯CSS特效应用实例，肝了10个晚上整理纯CSS特效（上）（附源码下载）
[写在前面]其实有时候经常会在某一天用到某种特效,然后就去网上找demo,千篇一律的CSS特效代码不说,更多的是滥竽充数,而且还没有特效预览图,因此针对我之前整理的CSS特效在这里做一个总结,希望给你 ...
10款炫酷的HTML5动画特效，附源码
HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷效果时,这些效果也非常消耗电脑的CPU,但是这些HTML5效果确实能给用户带来不一样的用户体验. 今天我要跟大家分享一些HT ...

2花瓣html,html花瓣飘落特效_520情侣浪漫表白JS特效分享（附源码）

2花瓣html,html花瓣飘落特效_520情侣浪漫表白JS特效分享（附源码）相关推荐

最新文章

热门文章