文章來源：Linux公社 做者：魚魚javascript
2019，2月，14日，和春節一前一後的情人節快要來了，IT 界的程序員大家想要度過這個美好的節日呢？你想用什麼特別的方式對你愛的人表白呢？css
咱們程序員是有情懷，懂浪漫的，富有理想主義的一個族羣，智商超越常人，當人表白的方式也是普通人難以學習的。html
曾經，有一份真誠的愛情放在我面前， 我沒有珍惜，java
等到我失去的時候才後悔莫及，jquery
人世間最痛苦的事莫過於此……linux
若是上天可以給我一個再來一次的機會，css3
我會對那個女孩子說三個字：程序員
「我愛你。」web
若是非要在這份愛上加上一個期限，編程
我但願是……一萬年！
一、送上一朵絕對炫酷的紅玫瑰
這個是西班牙程序員 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 style="text-align: center;">
<canvas id="c" height="500" width="500"></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.height=f=500;h=-250;function 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.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}',0)
// end of submission //
</script><br>
<span style="color: #ff0000;"><strong>Linux公社 <a href="http://www.linuxidc.com/"><span style="color: #ff0000;">www.linuxidc.com</span></a></strong></span></p>
</body>
</html>
二、jQuery+HTML5爛漫愛心表白動畫
jQuery+HTML5爛漫愛心表白動畫是一款jQuery HTML5 Canvas電子版的愛心表白動畫，效果至關不錯，頗有創意，很適合進行表白。
29行，30行修改時間，6行修改暱稱。
主要代碼：
<span class="comments">/**</span><br />
<span class="space"/><span class="comments">*2018—02-14,</span><br />
<span class="space"/><span class="comments">*2018-02-28.</span><br />
<span class="space"/><span class="comments">*/</span><br />
Boy name = <span class="keyword">Mr</span> Yu<br />
Girl name = <span class="keyword">Mrs</span> Xi<br />
<span class="comments">// Fall in love river. </span><br />
The boy love the girl;<br />
<span class="comments">// They love each other.</span><br />
The girl loved the boy;<br />
<span class="comments">// AS time goes on.</span><br />
The boy can not be separated the girl;<br />
<span class="comments">// At the same time.</span><br />
The girl can not be separated the boy;<br />
<span class="comments">// Both wind and snow all over the sky.</span><br />
<span class="comments">// Whether on foot or 5 kilometers.</span><br />
<span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />
<span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />
<span class="placeholder"/><span class="comments">// Whether it is right now</span><br />
<span class="placeholder"/><span class="comments">// Still in the distant future.</span><br />
<span class="placeholder"/>The boy has but one dream;<br />
<span class="comments">// 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
三、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
四、jQuery+HTML5實現惟美表白動畫代碼
這是一個很小的jQuery+HTML5靜態頁面，是一位程序員用來慶祝跟mm相戀一週年記念日。同時也爲了以程序員的視角來表達浪漫，改變你們對於程序員先入爲主的形象，程序員改變世界~
效果圖：
演示地址：http://www.linuxidc.com/yanshi/2018/02/qrj/biaobai/index.html
五、情人節送花動畫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>
效果圖：
演示地址： http://www.linuxidc.com/yanshi/2018/02/qrj/hua/index.html
六、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>
效果圖：
演示地址： http://www.linuxidc.com/yanshi/2018/02/qrj/qingren/index.html
七、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>
效果圖：
演示地址： http://www.linuxidc.com/yanshi/2018/02/qrj/xianhua/index.html
好了，若是你們還有更精彩的，別忘記分享給咱們哦。
咱們的程序員是否是都很是有才呢？誰說程序員不浪漫？誰說程序員都是單身狗啊？咱們是爲愛編程，用代碼敲出了美麗的愛情，用代碼譜寫最動人的愛情故事。無代碼，非程序，無程序，非人生。咱們程序員通常不表露，那是由於低調，用心。因此程序員纔是精英的表明
點擊「閱讀原文」,可進入做者博客主頁,歡迎點贊和關注哦！
本文分享自微信公衆號 - 程序員Hotel（XIEZHIXIN_2018）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。