今為了追到女朋友,眾位男士也是掏空心思,絞盡腦汁想各種表白的新招式,務(wù)必給女神一個(gè)難以忘記的表白。程序員當(dāng)然也不例外。既然學(xué)的是編程,那就要好好利用編程做一個(gè)與眾不同的表白,那最適合的編程語(yǔ)言就是前端了,能夠輕而易舉的就做出各種讓女孩心動(dòng)的代碼特效。
更多特效源碼,編程資料,私信我1即可免費(fèi)領(lǐng)取。
首先特效鎮(zhèn)文:
今天我們講的就是如何用代碼做出一個(gè)愛心表白特效。源碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>520</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<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;
}
p{
width: 1000px;
margin: 200px auto 0;
color: #fff;
font-size: 40px;
text-align: center;
}
</style>
</head>
<body>
<div class="love">
<div class="box transparent"></div>
<div class="box white delay6"></div>
<div class="box white delay2"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box white delay4"></div>
<div class="box white delay3"></div>
<div class="box transparent"></div>
<div class="box clear white delay5"></div>
<div class="box white delay5"></div>
<div class="box white delay6"></div>
<div class="box white delay3"></div>
<div class="box transparent"></div>
<div class="box white delay6"></div>
<div class="box white delay1"></div>
<div class="box white delay4"></div>
<div class="box white delay2"></div>
<div class="box clear white"></div>
<div class="box white delay1"></div>
<div class="box white delay4"></div>
<div class="box white delay2"></div>
<div class="box white delay6"></div>
<div class="box whitedelay3"></div>
<div class="box white delay6"></div>
<div class="box white delay3"></div>
<div class="box white delay1"></div>
<div class="box clear white"></div>
<div class="box white delay3"></div>
<div class="box white delay1"></div>
<div class="box white delay1"></div>
<div class="box white delay6"></div>
<div class="box white delay3"></div>
<div class="box white delay5"></div>
<div class="box white delay2"></div>
<div class="box white delay4"></div>
<div class="box clear transparent"></div>
<div class="box white delay6"></div>
<div class="box white delay1"></div>
<div class="box white delay5"></div>
<div class="box white delay1"></div>
<div class="box white delay5"></div>
<div class="box white delay3"></div>
<div class="box white delay4"></div>
<div class="box transparent"></div>
<div class="box clear transparent"></div>
<div class="box transparent"></div>
<div class="box white delay5"></div>
<div class="box white delay1"></div>
<div class="box white delay5"></div>
<div class="box white delay2"></div>
<div class="box white"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box clear transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box white"></div>
<div class="box white"></div>
<div class="box white delay2"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box clear transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box white delay1"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
<div class="box transparent"></div>
</div>
<p>我愛代碼,也愛你,雖然我不善言辭,請(qǐng)讓我用我的方式說:我愛你!</p>
</body>
</html>
擊查看520特效
由于上傳圖片大小有限制,所以效果不太好,實(shí)際效果比這炫酷很多!
這個(gè)特效是用HTML5/canvas配合javascript制作的,比較適合作為網(wǎng)站或者博客的背景,雖然錄制的圖片出來看起來很卡,但是實(shí)際上還是很順暢的,520要來了,也可以單獨(dú)做個(gè)表白的頁(yè)面發(fā)給自己的暗戀的人喲!這個(gè)特效的javascript代碼也不是很復(fù)雜,對(duì)于小白來說也可以慢慢理解,當(dāng)然,知識(shí)作為一個(gè)背景而言還很單調(diào),所以還需要各位自己去添加一些內(nèi)容!我的頭條上也有許多關(guān)于HTML5/javascript的特效和游戲,大家感興趣的可以去看看!下面附上源碼!
如果想要更多的企業(yè)求職加分項(xiàng)目,案例,學(xué)習(xí)方法可以來一下我的前端群570946165,每天都會(huì)精挑細(xì)選一個(gè)特效,項(xiàng)目出來詳細(xì)講解,分享!包括答疑解惑!
代碼過長(zhǎng)需要文檔版源碼來我的前端群570946165,已上傳到群文件
頭條號(hào)里有許多web前端學(xué)習(xí)視頻/源碼,企業(yè)常用特效/案例/項(xiàng)目,敬請(qǐng)關(guān)注!
你女票一定會(huì)這樣的!
望大家擁有愛情
這周過完就2022年了,為了幫助我的室友在年末順利脫單,22年有個(gè)完美的愛情,特地找了10款不同的表白代碼幫助她脫單,廢話不多說,直接看效果。(文末有源碼獲取方式)
故事的開始
故事的結(jié)束
故事結(jié)束了,下面我們一起來看下干貨,喜歡哪個(gè)就拿哪個(gè),總有一個(gè)適合的。
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"> ? 不經(jīng)意相識(shí),或許是緣分,或許是注定的。</span><br>
<span class="say"> </span><br>
<span class="say"> ? 第一次認(rèn)識(shí)你,感覺很親切,總想多看你一眼。</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、代碼表白式+愛心
// 修改文字內(nèi)容
<span class="space"/><span class="comments">* 昨晚午夜的初次相遇,</span><br />
<span class="space"/><span class="comments">* 所以我寫一些代碼來顯示我對(duì)你的愛.</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ì)我感覺如何
?</span><br />
u.sayOtherthing();<br />
<span class="comments">// 你是否對(duì)我這個(gè)突然間冒出來的人有好感呢?</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ī)椭汜寫堰^去不開心的事情.</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、小文章+愛心
// 修改文章內(nèi)容
<span class="comments">親愛的:xxx</span><br>
<span class="space"><span class="comments">好想你!</span></span><br>
<span class="space"><span class="comments">只有在你的微笑里,我才有呼吸,還貪戀著你的風(fēng)情,誘惑著你的神秘,埋葬了我的愛情,脈脈之情如一溪春水,快刀難斬?cái)啵S著天各一方的時(shí)間越來越長(zhǎng),我的思念也越來越深,我很想找一個(gè)萬(wàn)籟俱寂的深夜或一個(gè)陽(yáng)光明媚的早晨,把許多心底的惆悵、寂寞向你傾訴。親愛的,我們的故事是最感人,最真實(shí)的,早安,我永恒的愛人,雖然我尚未起床,但思想已經(jīng)飛到你的身邊來了,不管今世也好來世也好,我所要的只有你。我要與你同坐在有著月光的草坪上,一起遙望著繁星點(diǎn)綴的夜空,講述那人間古老的愛情神話。人生不止,寂寞不已。寂寞人生愛無休,寂寞是愛永遠(yuǎn)的主題。</span><br>
<span class="space"><span class="comments">親愛的,在這沒有月的漆黑的夜里,我獨(dú)自坐在窗前寫著這封信,希望睡前可以吻你;希望睡時(shí)可以抱著你;希望醒來可以看到_</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;">
親愛的, 這是我們認(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)愛你,一輩子,永不變!<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("你是我見過的最帥氣善良可愛的男孩");
}else if(Dianji==3){
alert("一生一世愛你");
}else if(Dianji==4){
alert("家務(wù)我全干");
}else if(Dianji==5){
alert("不藏私房錢");
}else if(Dianji==6){
alert("房子寫你名");
}else if(Dianji==7){
alert("工資全上交");
Dianji=1;
}
}
hao.οnclick=function(){
alert("小姐姐終于同意了,我愛你么么噠");
}
5、旋轉(zhuǎn)的照片墻
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、死皮賴臉+煙花
// 修改文字內(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('明人不說暗話!', A);
});
});
function A() {
modal('我喜歡你!', B);
}
function B() {
modal('我知道你在等我這一句話', C);
}
function C() {
modal('請(qǐng)您不要拒絕我', D);
}
function D() {
modal('拒絕我,不存在的', E);
}
function E() {
modal('這輩子都不可能讓你離開我', F);
}
function F() {
modal('跟我走吧', G);
}
function G() {
modal('房產(chǎn)證上寫你名', H);
}
function H() {
modal('我會(huì)做飯', I);
}
function I() {
modal('愛你。么么噠!', J)
}
function J() {
modal('行,我們?nèi)ッ裾值怯洶?#39;, function() {
fireworks();
});
}
直接txt打開修改文件中文字即可,不會(huì)的可以私信交流溝通,或者發(fā)文字直接幫改。
只要私信過來,都免費(fèi)送源碼(當(dāng)然我這也希望大家走過路過,點(diǎn)個(gè)贊,收藏下,轉(zhuǎn)發(fā)下),祝大家早日脫單,有對(duì)象的祝更加甜蜜。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。