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

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

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

          今為了追到女朋友,眾位男士也是掏空心思,絞盡腦汁想各種表白的新招式,務(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í)際效果比這炫酷很多!

          520來了,我用javascript做了個(gè)表白背景,快祝福我吧!


          這個(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ì)講解,分享!包括答疑解惑!

          表白背景HTML5/javascript源碼:

          代碼過長(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ì)象的祝更加甜蜜。


          主站蜘蛛池模板: 精品国产一区二区三区久久蜜臀| 亚洲国产综合精品中文第一区| 国精产品一区二区三区糖心| 国产亚洲日韩一区二区三区 | 国产精品无码不卡一区二区三区| 久久久久一区二区三区| 在线电影一区二区| 成人午夜视频精品一区| 国产麻豆媒一区一区二区三区| 国产精品熟女一区二区| 视频在线观看一区二区三区| 消息称老熟妇乱视频一区二区| 国产成人高清亚洲一区91| 欧美日韩综合一区二区三区| 91在线看片一区国产| 国产成人一区二区三区视频免费| 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 国产av福利一区二区三巨 | 亚洲一区二区三区首页| 中文字幕一区二区三区四区| 一区二区三区四区精品| 日韩一区二区三区免费播放| 国产免费av一区二区三区| 日韩美女在线观看一区| 无码喷水一区二区浪潮AV| 国产精品第一区揄拍| 无码一区二区三区爆白浆| 亚洲一区二区三区在线观看网站 | 无码AV一区二区三区无码| 国产在线无码视频一区| 国产一区二区福利久久| 日本丰满少妇一区二区三区| 精品一区二区三区四区电影| 一区二区三区四区视频在线| 精品无码国产一区二区三区麻豆| 日韩在线视频一区二区三区| 免费在线观看一区| 美女视频一区二区| 亚洲啪啪综合AV一区| ...91久久精品一区二区三区| 成人日韩熟女高清视频一区|