整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

520情侣浪漫表白JS特效分享(附源码)

20要来了,为回馈朋友们所有专栏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实战系列,在此也非常感谢大家对小编的支持!

情人节送给自己的女朋友玫瑰花,

对于程序员来说是不是太普通了呢?

为什么不试试让情人节变得更特别一些呢?

作为一名程序员,

可以用自己的技术创造出不一样的浪漫!

让你的女朋友眼前一亮,印象深刻。

这些浪漫的技术表白,你值得拥有。

1. I Love You Batch le

送她一个惊喜怎么样?

情人节向她示爱,

让她的电脑自动关机,

然后显示你的表白留言。

具体操作如下:

1.创建一个新的文本文件。

2.将以下代码复制到新创建的文件中

@echo off

msg * I LOVE YOU

shutdown -c "Error! You are too CUTE!" -s

3.将文件的扩展名从“.txt”更改为“.bat”

4.最后一步想办法让你的女朋友打开文件

2. C++ 我爱你的程序


如果你想像CPP程序员那样求婚,请运行这个

C++ Love Proposal 代码

#include<iostream>

#include<cmath>

using namespace std;

int main()

{

double x, y,

size=10;

char ch=3;

string message(" I Love You ");

int print_line = 4;

if(message.length() % 2 != 0)

message += " ";

for(x=0;x<size;x++)

{

for(y=0;y<=4*size;y++)

{

double dist1 = sqrt( pow(x-size,2) + pow(y-size,2) )

double dist2 = sqrt( pow(x-size,2) + pow(y-3*size,2)

if (dist1 < size + 5 || dist2 < size + 0.5 ) {

cout<< ch;

}

else

cout<< " ";

}

cout<<"\n";

}

for(x=1;x<2*size;x++)

{

for(y=0;y<x;y++)

cout << " ";

for (y=0;y<4*size + 1 - 2*x; y++)

{

if (x>= print_line - 1 && x <= print_line + 1) {

int idx = y - (4*size - 2*x - message.length()) / 2;

if(idx < message.length() && idx >= 0) {

if (x == print_line)

cout<<message[idx];

else cout << " ";

}

else

cout << ch;

}

else

cout<< ch;

}

cout<<endl;

}

return 0;

}


3. Proposal In Binary

万一,你太害羞了,不好意思表达自己的感情,只需要想办法让你的女朋友来解码这个二进制文件。一旦她解码了这个二进制文件,就可以看到你隐藏的相对她说的话。你只需要这样做对照ASCII表找到你想说的话,用二进制表达出来。如下所示

01101001 00100000 01101100 01101111 01110110 0110010

ASCII对照表



还不知道怎么做?

有一位程序大佬要向女朋友表白,

在聊天期间发给了女朋友一串数字

73、76、79、86、85

一步步引导女友

最终女友通过“ASCII对照表”破译5个数字:

翻译过来为“ILOV U”

尽管love不够完整,依旧成功撩到女友

4. Inspect Element

Inspect元素可以暂时关闭网站内容,

并对网站进行临时更改。

只需右键单击即可,

便可以在你希望的任何网站上进行临时更改。

单击最底部的inspect图标,

你将获得HTML和CSS的源代码。

你可以更改网站标题、消息等。

5. 程序员的情书

在给女朋友写情书的时候,

为什么不用自己的技术来展示自己呢?

学会用自己领域的专业术语,来向你的女朋友示爱吧!

Void missing_you()

For(time=meet_you;;time++)

Missing_you()

“自从遇见你,就没有一刻不想你”


<?php

while(me->met()==your->self()){

print("hello,world");

}

}

?>


”我一直在寻找

找到了你

便找到了全世界“


everBoy = aFlyBird.wafting(far).alone(;

nowBoy = eberBoy.flying(long);

honeyLife = nowBoy.meet(


“我曾是孤单的飞鸟

飘荡在远方的天空

如今我飞得太久

才知道你就是春天”


while(1){

NSString *myLife = @ "吃饭睡觉撸代码";

if(myLife containsString:@"YOU"){

NSLog(@"余生请多指教");

};


“我用一生在等待

直到你闯入我的世界

我只想对你说:余生请多指教”

6. Brainfucking code:

你的女朋友喜欢猜谜语吗?

给你一个最适合情人节输出的代码。

#include#define _____ std::cout

#define __________ int main() { char

#define ______ return __________ _, __, ___, ____; /* __________ */ _ = __ = ___ = ____ = '_'; /* ___ */ _ = _/_;

_++; /* _ _ __ ___ _____ _ */___ = __ = __/_; ___ /= _; __+=___; _++; __+=_; _____ << __; ____ /= _; ____++; /* _____ ____ */ ___ *= _; __ = __+_; /* _______ */ _____ << ____ << __; __ += _; _____ << __; __ += _; __ += ++_; _____ << __ << ___ << ____; /*__*/ __ += --_;

OUTPUT : I LOVE YOU

7. Programmer Pickup Lines

如果你不会写代码,也不太喜欢编程。

这里有一些“Rotech”的句子给你参考。

如果你是不java迷,你可以选择用python或C语言

语言:Java

while (life < end) {

love++;

}


直到死之前,每天爱你多一点

while(!world.destroy){

System.out.println("i love you");

}


爱你到天荒地老

语言:python

if(mountain.arris==None):

if(river.water==None):

if(winter.thunder==True):

if(summer.snow==True):

if(sky.height==ground.height):

i.withyou=False

else:

i.withyou=True


山无陵, 江水为竭,

冬雷震震, 夏雨雪,

天地合, 乃敢与君绝!

C语言

#inclde <stdio.h>

int main() {

printf("Hello World\n");

retrn 0;

}

// I can not say Hello to the World without u.


I can not say Hello to the World without u.

8.用动画示爱

除了上面这些情话,

更有程序员大佬用动画来秀恩爱,

真的是炫瞎眼睛。



还可以用一行代码画爱心

蓝色部分可以替换成心上人名字哦

print'\n'.join([''.join([('******'[(x-y)%*]if((x*0.05)**2+(y*0.1)**2-1)**3-(x*0.05)**2*(y*0.1)**3<=0 else' ')for x in range(-30,30)])for y in range(15,-15,-1)])



9、代码操控中央灯,大楼表白

百度资深的程序员“Peter”,为了给心爱女孩表白

悄悄溜进了百度大楼的是中央控制室,

写下控制智能灯的程序,

在后台定义了文字和动态功效。

随后百度大楼上出现了

灯光组合的“Ilove u贝贝”字样



10、各种程序员道具也可表白

键盘表白法



活用各大标识

喽艾瑞巴蒂!

今天是个非常特殊的日子呢

好像空气中

都弥漫着甜蜜的气息

又是一年的520

小伙伴们今天是不是

准备向心仪的那个ta

发出真诚的告白呀~

但是鲜花和一句喜欢你

难免落入俗套

有新意的高级浪漫

才更能显出那份独一无二的心意哦!

今天就要向大家传授秘籍

教你如何用代码说情话

赶紧拿小本本记下来~

-PART.01-

#代码情诗#

第1条 爱你到天荒地老

第2条 愿得一人心,白首不分离

第3条 一生只爱你一人

第4条 你就是我的春天

第5条 执子之手,与子偕老

第6条 我一直在找你,当我找到你,也就找到了整个世界

第7条 陪伴是最长情的告白

第8条 谁都不能掌控全世界,但你至少可以掌控我,这是我的温柔

第9条 想你

-PART.02-

#不同语言的三行情诗#

Python

SQL

JavaScript

C

C++

get了520表白攻略

这下没问题啦~

这么一看学代码实在是太有用了

掌握一门编程语言

有着月入过万的薪资

买一件称心如意的礼物

肯定不在话下

再加上这么特别的代码情话

抱得美人(or美男)归

还不是分分钟的事情吗!

祝大家都能有情人终成眷属!