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美男)归
还不是分分钟的事情吗!
祝大家都能有情人终成眷属!
*请认真填写需求信息,我们会在24小时内与您取得联系。