程序员的情人节应该这么优雅度过（附源码）
程序员的情人节应该这么优雅度过（附源码）
2018，2月，14日，和春节一前一后的情人节快要来了，IT 界的程序员你们想要度过这个美好的节日呢？你想用什么特别的方式对你爱的人表白呢？
我们程序员是有情怀，懂浪漫的，富有理想主义的一个族群，智商超越常人，当人表白的方式也是普通人难以学习的。
曾经，有一份真诚的爱情放在我面前， 我没有珍惜，
等到我失去的时候才后悔莫及，
人世间最痛苦的事莫过于此……
如果上天能够给我一个再来一次的机会，
我会对那个女孩子说三个字：
“我爱你。”
如果非要在这份爱上加上一个期限，
我希望是……一万年！
1、送上一朵绝对炫酷的红玫瑰
这个是西班牙程序员 Roman Cortes 在 2 月 14 日使用纯 javascript 脚本编写的神奇 3D 红色玫瑰花，用代码做出的玫瑰花，这才是做程序员的送给女朋友最好的情人节礼物呢！相比外面的玫瑰花，它更长久，更灿烂，更重要的是普通人根本不会！你们能做到么？
效果图：
演示地址： l
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>HTML5渲染的3D玫瑰花 - 帮客之家www.bkjia.com</title>
<meta charset="utf-8">
<meta name="description" content="帮客之家(www.bkjia.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="l
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();
效果图：
演示地址： l
4、jQuery+HTML5实现唯美表白动画代码
这是一个很小的jQuery+HTML5静态页面，是一位程序员用来庆祝跟mm相恋一周年纪念日。同时也为了以程序员的视角来表达浪漫，改变大家对于程序员先入为主的形象，程序员改变世界~
效果图：
演示地址：l
5、情人节送花动画HTML5特效
HTML5情人节送花表白放烟花动画特效，小伙子走进花店买花，然后把玫瑰花送到姑娘手上，姑娘接过花然后两个人一起看烟花，非常浪漫的一个HTML5动画，不止适合情人节表白使用，平时表白也可以用的。
部分代码：
<div id='content'>
<ul class='content-wrap'>
<!-- 第一副画面 -->
<li>
<!-- 背景图 -->
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</div>
<!-- 云 -->
<div class="cloudArea">
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
</div>
<!-- 太阳 -->
<div id="sun"></div>
</li>
<!-- 第二副画面 -->
<li>
<!-- 背景图 -->
<div class="b_background"></div>
<div class="b_background_preload"></div>
<!-- 商店 -->
<div class="shop">
<div class="door">
<div class="door-left"></div>
<div class="door-right"></div>
</div>
<!-- 灯 -->
<div class="lamp"></div>
</div>
<!-- 鸟 -->
<div class="bird"></div>
</li>
<!-- 第三副画面 -->
<li>
<!-- 背景图 -->
<div class="c_background">
<div class="c_background_top"></div>
<div class="c_background_middle"></div>
<div class="c_background_botton"></div>
</div>
<!-- 小女孩 -->
<div class="girl"></div>
<div class="bridge-bottom">
<div class="water">
<div id="water1" class="water_1"></div>
<div id="water2" class="water_2"></div>
<div id="water3" class="water_3"></div>
<div id="water4" class="water_4"></div>
</div>
</div>
<!-- 星星 -->
<ul class="stars">
<li class="stars1"></li>
<li class="stars2"></li>
<li class="stars3"></li>
<li class="stars4"></li>
<li class="stars5"></li>
<li class="stars6"></li>
</ul>
<!-- logo图 -->
<div class="logo">祝天下有情人终成眷属</div>
</li>
</ul>
<!-- 雪花 -->
<div id="snowflake"></div>
<!-- 小男孩 -->
<div id="boy" class="charector"></div>
</div>
效果图：
演示地址： l
6、jQuery情人节表白特效
jQuery浪漫下雪背景情人节表白动画，几张充满爱意的心形图片旋转着，表白文字慢慢出现，再加上雪花飘落的背景，整个浪漫氛围就出来了。
部分代码：
<script src="js/jquery.min.js"></script>
<!--雪花-->
<script src="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>
效果图：
演示地址： l
7、CCS3 svg情人节表白鲜花动画特效
部分代码：
<div class="bubbles">
<div class="bubble"><svg class="heart" viewBox="0 0 32 32">
<title>heart22</title>
<path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
</svg>
</div>
<div class="bubble"><svg class="heart" viewBox="0 0 32 32">
<title>heart22</title>
<path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
</svg>
</div>
<div class="bubble"><svg class="heart" viewBox="0 0 32 32">
<title>heart22</title>
<path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
</svg>
</div>
效果图：
演示地址： l
好了，如果大家还有更精彩的，别忘记分享给我们哦。
我们的程序员是不是都非常有才呢？谁说程序员不浪漫？谁说程序员都是单身狗啊？我们是为爱编程，用代码敲出了美丽的爱情，用代码谱写最动人的爱情故事。无代码，非程序，无程序，非人生。我们程序员一般不表露，那是因为低调，用心。所以程序员才是精英的代表。
本文提到的全部源码可以到帮客之家资源站下载：
------------------------------------------分割线------------------------------------------
免费下载地址在 http://linux.bkjia.com/
用户名与密码都是www.bkjia.com
具体下载目录在 /2018年资料/2月/9日/程序员的情人节应该这么优雅度过（附源码）/
下载方法见
------------------------------------------分割线------------------------------------------
评论暂时关闭