程序员的情人节应该这么优雅度过（附源码）
点击上方标题下「Linux公社」可快速关注
导读
2018，2月，14日，和春节一前一后的情人节快要来了，IT 界的程序员你们想要度过这个美好的节日呢？你想用什么特别的方式对你爱的人表白呢？
2018，2月，14日，和春节一前一后的情人节快要来了，IT 界的程序员你们想要度过这个美好的节日呢？你想用什么特别的方式对你爱的人表白呢？
我们程序员是有情怀，懂浪漫的，富有理想主义的一个族群，智商超越常人，当人表白的方式也是普通人难以学习的。
曾经，有一份真诚的爱情放在我面前， 我没有珍惜，
等到我失去的时候才后悔莫及，
人世间最痛苦的事莫过于此……
如果上天能够给我一个再来一次的机会，
我会对那个女孩子说三个字：
“我爱你。”
如果非要在这份爱上加上一个期限，
我希望是……一万年！
1、送上一朵绝对炫酷的红玫瑰
这个是西班牙程序员 Roman Cortes 在 2 月 14 日使用纯 javascript 脚本编写的神奇 3D 红色玫瑰花，用代码做出的玫瑰花，这才是做程序员的送给女朋友最好的情人节礼物呢！相比外面的玫瑰花，它更长久，更灿烂，更重要的是普通人根本不会！你们能做到么？
效果图：
演示地址： http://www.linuxidc.com/yanshi/2018/02/qrj/rose/index.html
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>HTML5渲染的3D玫瑰花 - Linux公社www.linuxidc.com</title>
<meta charset="utf-8">
<meta name="description" content="Linux公社(www.linuxidc.com)是专业的Linux系统门户网站，实时发布最新Linux资讯，包括Linux、Ubuntu、Fedora、RedHat、红旗Linux、Linux教程、Linux认证、SUSE Linux、Android、Oracle、Hadoop等技术。"/>
<meta name="keywords" content="Linux,Ubuntu,Fedora,RedHat,红旗Linux,Linux教程,Linux系统,Linux安装,SUSE Linux,Android,Oracle"/>
<link rel="canonical" href="http://www.linuxidc.com/"/>
</head>
<body>
<p >
<canvas id="c"></canvas>
<script>
var b = document.body;
var c = document.getElementsByTagName("canvas")[0];
var a = c.getContext("2d");
document.body.clientWidth;
</script>
<script>
// start of submission //
with(m=Math)C=cos,S=sin,P=pow,R=random;c.width=c.p(a,b,c){if(c>60)return[S(a*7)*(13+5/(.2+P(b*4,4)))-S(b)*50,b*f+50,625+C(a*7)*(13+5/(.2+P(b*4,4)))+b*400,a*1-b/2,a];A=a*2-1;B=b*2-1;if(A*A+B*B<1){if(c>37){n=(j=c&1)?6:4;o=.5/(a+.01)+C(b*125)*3-a*300;w=b*h;return[o*C(n)+w*S(n)+j*610-390,o*S(n)-w*C(n)+550-j*350,1180+C(B+A)*99-j*300,.4-a*.1+P(1-B*B,-h*6)*.15-a*b*.4+C(a+b)/5+P(C((o*(a+1)+(B>0?w:-w))/25),30)*.1*(1-B*B),o/1e3+.7-o*w*3e-6]}if(c>32){c=c*1.16-.15;o=a*45-20;w=b*b*h;z=o*S(c)+w*C(c)+620;return[o*C(c)-w*S(c),28+C(B*.5)*99-b*b*b*60-z/2-h,z,(b*b*.3+P((1-(A*A)),7)*.15+.3)*b,b*.7]}o=A*(2-b)*(80-c*2);w=99-C(A)*120-C(b)*(-h-c*4.9)+C(P(1-b,7))*50+c*2;z=o*S(c)+w*C(c)+700;return[o*C(c)-w*S(c),B*99-C(P(b, 7))*50-c/3-z/1.35+450,z,(1-b/1.2)*.9+a*.1, P((1-b),20)/4+.05]}}setInterval("for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fill+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}",0)
// end of submission //
</script><br>
<span ><strong>Linux公社 <a href="http://www.linuxidc.com/"><span >www.linuxidc.com</span></a></strong></span></p>
</body>
</html>
2、jQuery+HTML5烂漫爱心表白动画
jQuery+HTML5烂漫爱心表白动画是一款jQuery HTML5 Canvas电子版的爱心表白动画，效果相当不错，很有创意，很适合进行表白。
29行，30行修改时间，6行修改昵称。
主要代码：
<span>/**</span><br />
<span/><span>*2018—02-14,</span><br />
<span/><span>*2018-02-28.</span><br />
<span/><span>*/</span><br />
Boy name = <span>Mr</span> Yu<br />
Girl name = <span>Mrs</span> Xi<br />
<span>// Fall in love river. </span><br />
The boy love the girl;<br />
<span>// They love each other.</span><br />
The girl loved the boy;<br />
<span>// AS time goes on.</span><br />
The boy can not be separated the girl;<br />
<span>// At the same time.</span><br />
The girl can not be separated the boy;<br />
<span>// Both wind and snow all over the sky.</span><br />
<span>// Whether on foot or 5 kilometers.</span><br />
<span>The boy</span> very <span>happy</span>;<br />
<span>The girl</span> is also very <span>happy</span>;<br />
<span/><span>// Whether it is right now</span><br />
<span/><span>// Still in the distant future.</span><br />
<span/>The boy has but one dream;<br />
<span>// The boy wants the girl could well have been happy.</span><br />
<br>
<br>
I want to say:<br />
Baby, I love you forever;<br />
效果图：
演示地址： http://www.linuxidc.com/yanshi/2018/02/qrj/aixin/index.html
3、jQuery+CSS3情人节爱心特效
这是一款基于jQuery+CSS3实现的情人节悬挂摆动爱心动画特效源码。画面中心的心形图案呈现出时钟摆动的动画效果，同时图案中与背景上都会有小的心形动画浮动显示与隐藏的视觉效果。由于使用了部分CSS3技术，建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)浏览器预览本源码。
部分JS代码：
var shakes = {
MAX_PARTICLES: 500,
pool: [],
start: function(t, e, s) {
shakes.ropeH = t,
shakes.container = e,
shakes.timer = setInterval(function() {
shakes.spawn(getRadian(s)),
shakes.update()
},
50)
},
spawn: function(t) {
if (! (shakes.pool.length >= shakes.MAX_PARTICLES)) {
var e = Math.sin(t) * (shakes.ropeH + 40),
s = Math.cos(t) * (shakes.ropeH + 40) + 20;
heart = new TinyHeart(e, s, shakes.container),
shakes.pool.push(heart)
}
},
update: function() {
var t, e;
for (t = shakes.pool.length - 1; t >= 0; t--) e = shakes.pool[t],
e.alive ? e.move() : (e.destory(), shakes.pool.splice(t, 1))
},
stop: function() {
clearInterval(shakes.timer),
shakes.pool.forEach(function(t) {
t.destory()
}),
shakes.pool = []
}
},
init = function() {
var t = 180,
e = document.querySelector("#valentine"),
s = e.querySelector(".tiny"),
a = e.querySelector(".shake"),
i = function() {
e.querySelector(".close").addEventListener("click",
function() {
shakes.stop(),
e.style.display = "none"
})
};
shakes.start(t, s, a),
a.querySelector(".rope").style.height = t + "px",
a.querySelector(".heart-wrap").style.top = t - 60 + "px",
e.style.display = "block",
i()
};
init();
效果图：
演示地址： http://www.linuxidc.com/yanshi/2018/02/qrj/axdh/index.html
4、jQuery+HTML5实现唯美表白动画代码
这是一个很小的jQuery+HTML5静态页面，是一位程序员用来庆祝跟mm相恋一周年纪念日。同时也为了以程序员的视角来表达浪漫，改变大家对于程序员先入为主的形象，程序员改变世界~
效果图：
演示地址：http://www.linuxidc.com/yanshi/2018/02/qrj/biaobai/index.html
5、情人节送花动画HTML5特效
HTML5情人节送花表白放烟花动画特效，小伙子走进花店买花，然后把玫瑰花送到姑娘手上，姑娘接过花然后两个人一起看烟花，非常浪漫的一个HTML5动画，不止适合情人节表白使用，平时表白也可以用的。
部分代码：
<div id="content">
<ul>
<!-- 第一副画面 -->
<li>
<!-- 背景图 -->
<div>
<div></div>
<div></div>
<div></div>
</div>
<!-- 云 -->
<div>
<div></div>
<div></div>
</div>
<!-- 太阳 -->
<div id="sun"></div>
</li>
<!-- 第二副画面 -->
<li>
<!-- 背景图 -->
<div></div>
<div></div>
<!-- 商店 -->
<div>
<div>
<div></div>
<div></div>
</div>
<!-- 灯 -->
<div></div>
</div>
<!-- 鸟 -->
<div></div>
</li>
<!-- 第三副画面 -->
<li>
<!-- 背景图 -->
<div>
<div></div>
<div></div>
<div></div>
</div>
<!-- 小女孩 -->
<div></div>
<div>
<div>
<div id="water1"></div>
<div id="water2"></div>
<div id="water3"></div>
<div id="water4"></div>
</div>
</div>
<!-- 星星 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- logo图 -->
<div>祝天下有情人终成眷属</div>
</li>
</ul>
<!-- 雪花 -->
<div id="snowflake"></div>
<!-- 小男孩 -->
<div id="boy"></div>
</div>
效果图：
演示地址： http://www.linuxidc.com/yanshi/2018/02/qrj/hua/index.html
6、jQuery情人节表白特效
jQuery浪漫下雪背景情人节表白动画，几张充满爱意的心形图片旋转着，表白文字慢慢出现，再加上雪花飘落的背景，整个浪漫氛围就出来了。
部分代码：
<script src="http://www.gunmi.cn/v/js/jquery.min.js"></script>
<!--雪花-->
<script src="http://www.gunmi.cn/v/js/snow.js"></script>
<script>
$(".pic ul li").each(function(i){//遍历
var deg=360/$(".pic ul li").size();//size个数
//当前的li对象 添加css样式
$(this).css({"transform":"rotateY("+deg*i+"deg) translateZ(216px)"});
$.fn.snow({
minSize:10,
maxSize:15,
newOn:500,
flakeColor:"#ffffff"
});
});
var i=0;
var str="能够遇见你是我最大的幸运，有了你生活变得丰富多彩，有了你，世界变得如此迷人；你是我的世界，我的世界是你，对我来说，不是在最美好的时光遇见了你，而是遇见你后都是最美好的时光！";
window.onload=function typing(){
//获取div
var mydiv=document.getElementById("text");
mydiv.innerHTML+=str.charAt(i);
i++;
var id=setTimeout(typing,100);
if(i==str.length){
clearTimeout(id);
}
}
</script>
效果图：
演示地址： http://www.linuxidc.com/yanshi/2018/02/qrj/qingren/index.html
7、CCS3 svg情人节表白鲜花动画特效
请到原网页查看
好了，如果大家还有更精彩的，别忘记分享给我们哦。
我们的程序员是不是都非常有才呢？谁说程序员不浪漫？谁说程序员都是单身狗啊？我们是为爱编程，用代码敲出了美丽的爱情，用代码谱写最动人的爱情故事。无代码，非程序，无程序，非人生。我们程序员一般不表露，那是因为低调，用心。所以程序员才是精英的代表。
本文提到的全部源码可以到Linux公社资源站下载：
------------------------------------------分割线------------------------------------------
免费下载地址在 http://linux.linuxidc.com/
用户名与密码都是www.linuxidc.com
具体下载目录在 /2018年资料/2月/9日/程序员的情人节应该这么优雅度过（附源码）/
下载方法见 http://www.linuxidc.com/Linux/2013-07/87684.htm
------------------------------------------分割线------------------------------------------
本文永久更新链接地址
：http://www.linuxidc.com/Linux/2018-02/150847.htm小编个人微信，扫码或长按手指加我：
点击左下方“阅读原文”，了解更多详情
- 男子情人节收到女朋友的礼物，同事都以为他抱着猪蹄，太有喜感了
- “企业年金”你应该知道的那些事
- 电视剧里叫的皇上错了！在古代这样是要杀头的，那应该怎么叫呢？
- 你弟弟的彩礼钱都是我给的，过年连个电话也不打，你还说应该的？
- 2.14丨情人节给ta多维度的爱
- 情人节，咱们先来一场佛系爱情？
- 猎人谷心形热气球上线啦! 如果找对有情人, 天天都过情人节 !
- 情人节，秦凯何姿就要任性撒狗粮！
- 考研狗春节应该如何应对七大姑八大姨？
- 瑜伽体式详解(二十四):大腿肌肉松散，缺乏美观，应该这样改善