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小時內與您取得聯系。