程式員的情人節應該這麼優雅度過（附源碼）
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(Firefox)或Google(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日/程式員的情人節應該這麼優雅度過（附源碼）/
下載方法見
------------------------------------------分割線------------------------------------------
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
