月薪3w的大佬，一篇文章教你如何制作表白愛(ài)心特效（有源碼）

今為了追到女朋友，眾位男士也是掏空心思，絞盡腦汁想各種表白的新招式，務(wù)必給女神一個(gè)難以忘記的表白。程序員當(dāng)然也不例外。既然學(xué)的是編程，那就要好好利用編程做一個(gè)與眾不同的表白，那最適合的編程語(yǔ)言就是前端了，能夠輕而易舉的就做出各種讓女孩心動(dòng)的代碼特效。

更多特效源碼，編程資料，私信我1即可免費(fèi)領(lǐng)取。

首先特效鎮(zhèn)文：

今天我們講的就是如何用代碼做出一個(gè)愛(ài)心表白特效。源碼如下：

<!DOCTYPE html>

<html>

<head>

<style>

*{margin: 0; padding: 0;}

ul,ol{list-style: none;}

a{text-decoration: none;color: inherit;}

.clearfix:after{content: '';display: block;clear: both;}

.clear{clear: both;}

body{

background-color: #8a0a0a;

}

.love{

display: table;

flex-wrap: wrap;

margin: 100px auto;

}

.box{

float:left;

width: 25px;

height: 25px;

border-radius: 2px;

margin-right: 2px;

margin-bottom: 2px

}

.box:hover{

background: #8a0a0a;

}

.box:not(.transparent){

background-color: #fff;

opacity: 0;

transform: translateY(-300px);

animation: move 4s infinite;

}

@keyframes move{

25%{

opacity: 1;

transform: translateY(0);

}

50%{

opacity: 1;

transform: translateY(0);

}

65%{

opacity: 1;

transform: translateY(0);

}

100%{

opacity: 0;

transform: translateY(300px);

}

.box.delay1{

animation-delay: .1s;

}

.box.delay2{

animation-delay: .2s;

}

.box.delay3{

animation-delay: .4s;

}

.box.delay4{

animation-delay: .5s;

}

.box.delay5{

animation-delay: .7s;

}

.box.delay6{

animation-delay: .9s;

}

width: 1000px;

margin: 200px auto 0;

color: #fff;

font-size: 40px;

text-align: center;

}

</style>

</head>

<body>

</div>

<p>我愛(ài)代碼，也愛(ài)你，雖然我不善言辭，請(qǐng)讓我用我的方式說(shuō)：我愛(ài)你！</p>

</body>

</html>

擊查看520特效

由于上傳圖片大小有限制，所以效果不太好，實(shí)際效果比這炫酷很多！

520來(lái)了，我用javascript做了個(gè)表白背景，快祝福我吧！

這個(gè)特效是用HTML5/canvas配合javascript制作的，比較適合作為網(wǎng)站或者博客的背景，雖然錄制的圖片出來(lái)看起來(lái)很卡，但是實(shí)際上還是很順暢的，520要來(lái)了，也可以單獨(dú)做個(gè)表白的頁(yè)面發(fā)給自己的暗戀的人喲！這個(gè)特效的javascript代碼也不是很復(fù)雜，對(duì)于小白來(lái)說(shuō)也可以慢慢理解，當(dāng)然，知識(shí)作為一個(gè)背景而言還很單調(diào)，所以還需要各位自己去添加一些內(nèi)容！我的頭條上也有許多關(guān)于HTML5/javascript的特效和游戲，大家感興趣的可以去看看！下面附上源碼！

如果想要更多的企業(yè)求職加分項(xiàng)目，案例，學(xué)習(xí)方法可以來(lái)一下我的前端群570946165，每天都會(huì)精挑細(xì)選一個(gè)特效，項(xiàng)目出來(lái)詳細(xì)講解，分享！包括答疑解惑！

表白背景HTML5/javascript源碼：

代碼過(guò)長(zhǎng)需要文檔版源碼來(lái)我的前端群570946165，已上傳到群文件

頭條號(hào)里有許多web前端學(xué)習(xí)視頻/源碼，企業(yè)常用特效/案例/項(xiàng)目，敬請(qǐng)關(guān)注！

你女票一定會(huì)這樣的！

望大家擁有愛(ài)情

一、故事背景

這周過(guò)完就2022年了，為了幫助我的室友在年末順利脫單，22年有個(gè)完美的愛(ài)情，特地找了10款不同的表白代碼幫助她脫單，廢話不多說(shuō)，直接看效果。（文末有源碼獲取方式）

故事的開(kāi)始

故事的結(jié)束

故事結(jié)束了，下面我們一起來(lái)看下干貨，喜歡哪個(gè)就拿哪個(gè)，總有一個(gè)適合的。

二、十款表白神器效果展示

1、愛(ài)心樹(shù)

// 修改文字部分
<span  class="say"> ? My crush story</span><br>
<span  class="say"> </span><br>
<span  class="say"> For xxx</span><br>
<span  class="say"> </span><br>
<span  class="say"> ? 不經(jīng)意相識(shí)，或許是緣分，或許是注定的。</span><br>
<span  class="say"> </span><br>
<span  class="say"> ? 第一次認(rèn)識(shí)你，感覺(jué)很親切，總想多看你一眼。</span><br>
<span  class="say"> </span><br>
<span  class="say"> ? 就算因?yàn)檎`會(huì)而淡漠，我還在想念你的好。</span><br>
<span  class="say"> </span><br>
<span  class="say"> ? 那次你我共同的朋友告訴我，你對(duì)我的印象。</span><br>
<span  class="say"> </span><br>
<span  class="say"> ? 之后不敢再出現(xiàn)在你的面前，或許你是對(duì)的。</span><br>
<span  class="say"> </span><br>
<span  class="say"> ? 我會(huì)默默守候著你。</span><br>
<span  class="say"> </span><br>
<span  class="say"> ? You are my crush girl..永遠(yuǎn)..</span><br>
<span  class="say"> </span><br>
<span  class="say"><span  class="space"></span> ------ TTFY ------</span>
... 
//修改時(shí)間部分
var together = new Date();
together.setFullYear(2018, 05, -11); 			//剛在一起的時(shí)間，時(shí)間年月日

2、代碼表白式+愛(ài)心

// 修改文字內(nèi)容
<span class="space"/><span class="comments">* 昨晚午夜的初次相遇,</span><br />
<span class="space"/><span class="comments">* 所以我寫(xiě)一些代碼來(lái)顯示我對(duì)你的愛(ài).</span><br />                <span class="space"/><span class="comments">*/</span><br />
Boy i = <span class="keyword">new</span> Boy(<span class="string">"BF"</span>);<br />
Girl u = <span class="keyword">new</span> Girl(<span class="string">"GF"</span>);<br />
<span class="comments">// On October 15, 2019, I told you I love you.. </span><br />
i.love(u);<br />
<span class="comments">// 但是,我不知道你對(duì)我感覺(jué)如何
?</span><br />
u.sayOtherthing();<br />
<span class="comments">// 你是否對(duì)我這個(gè)突然間冒出來(lái)的人有好感呢?</span><br />
<span class="keyword">var</span> reason=i.ask(u);<br />
<span class="comments">// 我希望你能給我機(jī)會(huì)和時(shí)間讓我們彼此了解 .</span><br />
$("body").append(reason);<br />
<span class="comments">// 別擔(dān)心,我不是壞人!我要保護(hù)你.</span><br />
<span class="comments">// 愿上天能賜給我們緣分.</span><br />
i.takeCareOf(u);<br />
<span class="comments">// 我會(huì)一直等待,直到你冰封的心融化,因?yàn)槲矣行判?.</span><br />
<span class="keyword">boolean</span> isAccept = <span class="keyword">false</span>;<br />
<span class="keyword">while</span> (isAccept) {<br />
<span class="placeholder"/>i.waitFor(u);<br />
<span class="placeholder"/><span class="comments">// 我認(rèn)為這是一個(gè)重要的決定</span><br />
<span class="placeholder"/><span class="comments">// 讓我?guī)椭汜寫(xiě)堰^(guò)去不開(kāi)心的事情.</span><br />
<span class="placeholder"/>isAccept = u.thinkOver();<br />
}<br />
<span class="comments">// 然后開(kāi)始我們的開(kāi)始,和你幸福的生活.</span><br />
...
<div id="messages">
   xxx, I have fallen in love with  you //修改為xxx為你心愛(ài)的她
<div id="loveu">
    Love u forever and ever.<br/>
    <div class="signature">- TTFY</div>

3、小文章+愛(ài)心

// 修改文章內(nèi)容
<span  class="comments">親愛(ài)的：xxx</span><br>
<span  class="space"><span  class="comments">好想你！</span></span><br>
<span  class="space"><span  class="comments">只有在你的微笑里，我才有呼吸，還貪戀著你的風(fēng)情，誘惑著你的神秘，埋葬了我的愛(ài)情，脈脈之情如一溪春水，快刀難斬?cái)啵S著天各一方的時(shí)間越來(lái)越長(zhǎng)，我的思念也越來(lái)越深，我很想找一個(gè)萬(wàn)籟俱寂的深夜或一個(gè)陽(yáng)光明媚的早晨，把許多心底的惆悵、寂寞向你傾訴。親愛(ài)的，我們的故事是最感人，最真實(shí)的，早安，我永恒的愛(ài)人，雖然我尚未起床，但思想已經(jīng)飛到你的身邊來(lái)了，不管今世也好來(lái)世也好，我所要的只有你。我要與你同坐在有著月光的草坪上，一起遙望著繁星點(diǎn)綴的夜空，講述那人間古老的愛(ài)情神話。人生不止，寂寞不已。寂寞人生愛(ài)無(wú)休，寂寞是愛(ài)永遠(yuǎn)的主題。</span><br>
<span  class="space"><span  class="comments">親愛(ài)的，在這沒(méi)有月的漆黑的夜里，我獨(dú)自坐在窗前寫(xiě)著這封信，希望睡前可以吻你；希望睡時(shí)可以抱著你；希望醒來(lái)可以看到_</span></span></span></div>
<div  id="loveHeart">
<canvas  id="garden"  width="670"  height="625"></canvas>
<div  id="words"  style="position: absolute; top: 260.5px; left: 755px;">
<div  id="messages"  style="display: block;">
親愛(ài)的, 這是我們認(rèn)識(shí)的第
<div  id="elapseClock"><span  class="digit">0</span> days <span  class="digit">19</span> hours <span  class="digit">44</span> minutes <span  class="digit">40</span> seconds</div>
</div>
<div  id="loveu"  style="display: block;">
永遠(yuǎn)愛(ài)你，一輩子，永不變！<br>
...
// 修改在一起的時(shí)間
var together = new Date();
together.setFullYear(2019, 5, 20); //剛在一起的時(shí)間，時(shí)間年月日

4、死皮賴臉式

// html中代碼修改
<p>我觀察你很久了</p>
<h1>小姐姐做我對(duì)象好不好?</h1>
<img src="images/1.jpg">
<div class="bottom">
	<div class="left" id="hao">好</div>
	<div class="right" id="buhao">不好</div>
</div>
...
// js中代碼修改
if(Dianji==1){
   		alert("小姐姐在考慮一下唄");
   }else if(Dianji==2){
   		alert("你是我見(jiàn)過(guò)的最帥氣善良可愛(ài)的男孩");   		
   }else if(Dianji==3){
   		alert("一生一世愛(ài)你");   		
   }else if(Dianji==4){
   		alert("家務(wù)我全干");   		
  }else if(Dianji==5){
   		alert("不藏私房錢(qián)");
  }else if(Dianji==6){
   		alert("房子寫(xiě)你名");
  }else if(Dianji==7){
   		alert("工資全上交");
  		Dianji=1;
  }
}
hao.οnclick=function(){
	alert("小姐姐終于同意了，我愛(ài)你么么噠");
}

5、旋轉(zhuǎn)的照片墻

6、千紙鶴

7、文字愛(ài)心

// 修改生成愛(ài)心的文字
<textPath xlink:href="#partialPath"  startOffset="12">What's in a name? That which we call a rose By any other word would smell as sweet...</textPath>

8、煙花+蛋糕

9、紅玫瑰

10、死皮賴臉+煙花

// 修改文字內(nèi)容
<script type="text/javascript">
$(function() {
	$('#yes').click(function(event) {
		modal('我就知道小姐姐您一定會(huì)愿意的。(^_^)', function() {
			$('.page_one').addClass('hide');
			$('.page_two').removeClass('hide');
			// typeWrite();
			fireworks();

		});
	});
	$('#no').click(function(event) {
		modal('明人不說(shuō)暗話！', A);
	});
});
function A() {
	modal('我喜歡你！', B);
}
function B() {
	modal('我知道你在等我這一句話', C);
}
function C() {
	modal('請(qǐng)您不要拒絕我', D);
}
function D() {
	modal('拒絕我，不存在的', E);
}
function E() {
	modal('這輩子都不可能讓你離開(kāi)我', F);
}
function F() {
	modal('跟我走吧', G);
}
function G() {
	modal('房產(chǎn)證上寫(xiě)你名', H);
}

function H() {
	modal('我會(huì)做飯', I);
}
function I() {
	modal('愛(ài)你。么么噠！', J)
}
function J() {
	modal('行，我們?nèi)ッ裾值怯洶?#39;, function() {
		fireworks();
	});
}

三、使用方式

直接txt打開(kāi)修改文件中文字即可，不會(huì)的可以私信交流溝通，或者發(fā)文字直接幫改。

四、源碼獲取方式

只要私信過(guò)來(lái)，都免費(fèi)送源碼（當(dāng)然我這也希望大家走過(guò)路過(guò)，點(diǎn)個(gè)贊，收藏下，轉(zhuǎn)發(fā)下），祝大家早日脫單，有對(duì)象的祝更加甜蜜。

在線咨詢

上一篇：Web前端開(kāi)發(fā)快速入門(mén)，了解HTML基本標(biāo)簽，每個(gè)都很重要
下一篇：僅靠一部手機(jī)，我完成了Word，Excel，PPT，PDF格式的互轉(zhuǎn)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

月薪3w的大佬，一篇文章教你如何制作表白愛(ài)心特效（有源碼）

520來(lái)了，我用javascript做了個(gè)表白背景，快祝福我吧！

表白背景HTML5/javascript源碼：

一、故事背景

二、十款表白神器效果展示

三、使用方式

四、源碼獲取方式

您的項(xiàng)目需求