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

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

更多特效源碼，編程資料，私信我1即可免費領取。

首先特效鎮文：

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

<!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>我愛代碼，也愛你，雖然我不善言辭，請讓我用我的方式說：我愛你！</p>

</body>

</html>

擊查看520特效

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

520來了，我用javascript做了個表白背景，快祝福我吧！

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

如果想要更多的企業求職加分項目，案例，學習方法可以來一下我的前端群570946165，每天都會精挑細選一個特效，項目出來詳細講解，分享！包括答疑解惑！

表白背景HTML5/javascript源碼：

代碼過長需要文檔版源碼來我的前端群570946165，已上傳到群文件

頭條號里有許多web前端學習視頻/源碼，企業常用特效/案例/項目，敬請關注！

你女票一定會這樣的！

望大家擁有愛情

一、故事背景

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

故事的開始

故事的結束

故事結束了，下面我們一起來看下干貨，喜歡哪個就拿哪個，總有一個適合的。

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

1、愛心樹

// 修改文字部分
<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"> ? 不經意相識，或許是緣分，或許是注定的。</span><br>
<span  class="say"> </span><br>
<span  class="say"> ? 第一次認識你，感覺很親切，總想多看你一眼。</span><br>
<span  class="say"> </span><br>
<span  class="say"> ? 就算因為誤會而淡漠，我還在想念你的好。</span><br>
<span  class="say"> </span><br>
<span  class="say"> ? 那次你我共同的朋友告訴我，你對我的印象。</span><br>
<span  class="say"> </span><br>
<span  class="say"> ? 之后不敢再出現在你的面前，或許你是對的。</span><br>
<span  class="say"> </span><br>
<span  class="say"> ? 我會默默守候著你。</span><br>
<span  class="say"> </span><br>
<span  class="say"> ? You are my crush girl..永遠..</span><br>
<span  class="say"> </span><br>
<span  class="say"><span  class="space"></span> ------ TTFY ------</span>
... 
//修改時間部分
var together = new Date();
together.setFullYear(2018, 05, -11); 			//剛在一起的時間，時間年月日

2、代碼表白式+愛心

// 修改文字內容
<span class="space"/><span class="comments">* 昨晚午夜的初次相遇,</span><br />
<span class="space"/><span class="comments">* 所以我寫一些代碼來顯示我對你的愛.</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">// 但是,我不知道你對我感覺如何
?</span><br />
u.sayOtherthing();<br />
<span class="comments">// 你是否對我這個突然間冒出來的人有好感呢?</span><br />
<span class="keyword">var</span> reason=i.ask(u);<br />
<span class="comments">// 我希望你能給我機會和時間讓我們彼此了解 .</span><br />
$("body").append(reason);<br />
<span class="comments">// 別擔心,我不是壞人!我要保護你.</span><br />
<span class="comments">// 愿上天能賜給我們緣分.</span><br />
i.takeCareOf(u);<br />
<span class="comments">// 我會一直等待,直到你冰封的心融化,因為我有信心..</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">// 我認為這是一個重要的決定</span><br />
<span class="placeholder"/><span class="comments">// 讓我幫助你釋懷過去不開心的事情.</span><br />
<span class="placeholder"/>isAccept = u.thinkOver();<br />
}<br />
<span class="comments">// 然后開始我們的開始,和你幸福的生活.</span><br />
...
<div id="messages">
   xxx, I have fallen in love with  you //修改為xxx為你心愛的她
<div id="loveu">
    Love u forever and ever.<br/>
    <div class="signature">- TTFY</div>

3、小文章+愛心

// 修改文章內容
<span  class="comments">親愛的：xxx</span><br>
<span  class="space"><span  class="comments">好想你！</span></span><br>
<span  class="space"><span  class="comments">只有在你的微笑里，我才有呼吸，還貪戀著你的風情，誘惑著你的神秘，埋葬了我的愛情，脈脈之情如一溪春水，快刀難斬斷，隨著天各一方的時間越來越長，我的思念也越來越深，我很想找一個萬籟俱寂的深夜或一個陽光明媚的早晨，把許多心底的惆悵、寂寞向你傾訴。親愛的，我們的故事是最感人，最真實的，早安，我永恒的愛人，雖然我尚未起床，但思想已經飛到你的身邊來了，不管今世也好來世也好，我所要的只有你。我要與你同坐在有著月光的草坪上，一起遙望著繁星點綴的夜空，講述那人間古老的愛情神話。人生不止，寂寞不已。寂寞人生愛無休，寂寞是愛永遠的主題。</span><br>
<span  class="space"><span  class="comments">親愛的，在這沒有月的漆黑的夜里，我獨自坐在窗前寫著這封信，希望睡前可以吻你；希望睡時可以抱著你；希望醒來可以看到_</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;">
親愛的, 這是我們認識的第
<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;">
永遠愛你，一輩子，永不變！<br>
...
// 修改在一起的時間
var together = new Date();
together.setFullYear(2019, 5, 20); //剛在一起的時間，時間年月日

4、死皮賴臉式

// html中代碼修改
<p>我觀察你很久了</p>
<h1>小姐姐做我對象好不好?</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("你是我見過的最帥氣善良可愛的男孩");   		
   }else if(Dianji==3){
   		alert("一生一世愛你");   		
   }else if(Dianji==4){
   		alert("家務我全干");   		
  }else if(Dianji==5){
   		alert("不藏私房錢");
  }else if(Dianji==6){
   		alert("房子寫你名");
  }else if(Dianji==7){
   		alert("工資全上交");
  		Dianji=1;
  }
}
hao.οnclick=function(){
	alert("小姐姐終于同意了，我愛你么么噠");
}

5、旋轉的照片墻

6、千紙鶴

7、文字愛心

// 修改生成愛心的文字
<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、死皮賴臉+煙花

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

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

function H() {
	modal('我會做飯', I);
}
function I() {
	modal('愛你。么么噠！', J)
}
function J() {
	modal('行，我們去民政局登記吧', function() {
		fireworks();
	});
}

三、使用方式

直接txt打開修改文件中文字即可，不會的可以私信交流溝通，或者發文字直接幫改。

四、源碼獲取方式

只要私信過來，都免費送源碼（當然我這也希望大家走過路過，點個贊，收藏下，轉發下），祝大家早日脫單，有對象的祝更加甜蜜。

在線咨詢

上一篇：Web前端開發快速入門，了解HTML基本標簽，每個都很重要
下一篇：僅靠一部手機，我完成了Word，Excel，PPT，PDF格式的互轉

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

520來了，我用javascript做了個表白背景，快祝福我吧！

表白背景HTML5/javascript源碼：

一、故事背景

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

三、使用方式

四、源碼獲取方式

您的項目需求