知道各位朋友是如何表白的?作為一名的程序員,除了天天肝項目、改BUG之外和保護好頭發之外,找女朋友也是一件至關重要的事,畢竟父母這兩位"產品經理"可天天念叨!
這不從互聯網上搜集了一些表白網頁源代碼,總共有18款,供大家參考學習,多余的話我就不說了,大家操練起來,部署上線自己的項目。由于項目比較多,我這里僅展示幾款比較養眼的。
image
注: 以下網站均包含動態效果,截圖時僅采用靜態圖片呈現。
有點非主流的html做的網頁效果,不知道現在的朋友們會不會喜歡這種風格。可以將你們的大頭貼貼在上面。
表白網站02
將你的想對那個Ta說的話寫在左邊,右邊是緩緩飄落的愛心,是不是很浪漫呢?
表白網站03
這一款和上面的網站類似,增加了右側相框功能,可以把你們的照片放在右邊,點擊鼠標時會輪播切換,是不是很有趣呢?
表白網站04
這一款雖然也和前面的網站類似,但這個動態效果確實不錯,擁有浪漫的愛心和飄落的雪花。
表白網站05
這款是交互式的網站,可以手動制定不同的場景,把你想對Ta說的話寫下來。
點擊右下角的愛心圖標可以切換。
下面展示一些場景:
表白網站06
還有一些其它的樣式~
旋轉相冊
也有這種選裝相冊類型的,可以使用鼠標拖動和選裝,呈現3D的效果,放上Ta的照片,效果拉滿!
還有這種旋轉時鐘類型的網頁,也可以拿到源碼后根據自己的需求稍做修改或嵌入自己的網站中都是不錯的方式。
還有這類比較唯美的網頁,相信大家也比較喜歡。
含蓄類
如果你不好意思當面開口,還可以發這樣的網站給那個TA
如果想查看效果,我已經貼心地放網站整理到演示站點上了,可以訪問以下網址查看效果:
https://aoarasi.com/archives/biaobai
如果想獲得此源碼,請在后臺回復關鍵字 「表白」 獲取,如果不會建站或遇到問題也可以聯系我。
嘍,首先和大家說聲抱歉,停更了這么久,主要是期間因為工作調動的關系,工作變忙了,沒有時間來更新了,今天趁著領導不在,偷偷來更新一下吧~
首先我的分享方式可能和別人的不同,別人可能是從最開始的一步一步開始教起,我不是,我是先把效果展示給大家,讓大家先看看這個東西,然后我再開始講,有看不下去的現在就可以吧網頁關了,免得看完又來噴我,我不是什么大神,噴我有什么用?我看的心里還不舒服,是吧,為了營造良好的網絡環境,別噴啊~
接下來進入主題:
大家可能都看過下面的這個網頁截圖
這個是一個類似于計時器的這么一個情侶間的網頁,今天我的目的就是把大家都教會了(不會的我下面會放源碼),然后回家有興趣的可以做好展示給自己的另一半看看~
我也放個網址吧,讓你們可以看看實際效果是什么樣的
http://1.giggle.applinzi.com/shouye1.html
就是這個樣子,雖然可能過氣了吧,但是我相信你的另一半看完還是會很感動的
那么接下來,我要放html的源碼了:然后我會開始講解:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>G家life</title>
<style type="text/css">
@font-face {
font-family: digit;
src: url('digital-7_mono.ttf') format("truetype");
}
</style>
<link href="css/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<!--audio id="audio" controls>
<source src="music.mp3" type="audio/mpeg" codecs="mp3">
</audio-->
<div id="mainDiv">
<div id="content">
<div id="code">
<span class="comments">/**</span><br />
<span class="space"/><span class="comments">*2017—03-10,Acquaintance</span><br />
<span class="space"/><span class="comments">*2017-03-14.meet</span><br />
<span class="space"/><span class="comments">*/</span><br />
My name=<span class="keyword">Guan</span> Jiaqi<br />
Your name=<span class="keyword">Shen</span> Jimei<br />
<span class="comments">//The first time I saw you. </span><br />
Be attracted to you;<br />
<span class="comments">// I used to think.</span><br />
Like a person without reason;<br />
<span class="comments">// But when I see you.</span><br />
I believe this sentence is wrong for a long time;<br />
<span class="comments">// I want to stay with you every day.</span><br />
時到 花自開;<br />
<span class="comments">// 靠在你肩上的時候心忽然,暖了一下.</span><br />
<!--span class="comments">// </span><br /-->
<span class="keyword">你是非常可愛的人.<br />真應該遇到最好的人<br /></span> 我也真希望 <span class="keyword">我就是</span>;<br />
<!--span class="keyword"></span> <span class="keyword"> </span>;<br /-->
<span class="placeholder"/><span class="comments">// I love three things in this world.</span><br />
<span class="placeholder"/><span class="comments">// Sun, moon and you. </span><br />
<span class="placeholder"/>Sun for day, moon for night, and you forever.<br />
<span class="comments">// I love you not because of who you are,<br />but because of who I am when I am with you.
</span><br />
<br>
<br>
I want to say:<br />
You are the sun at two in the morning;<br />
玲瓏骰子安紅豆<br />
入骨相思知不知<br />
</div>
<div id="loveHeart">
<canvas id="garden"></canvas>
<div id="words">
<div id="messages">
沈菇涼,這是我們相遇的第:
<div id="elapseClock"></div>
</div>
<div id="loveu">
不思量 自難忘<br/>
<div class="signature">- 管先森</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var offsetX=$("#loveHeart").width() / 2;
var offsetY=$("#loveHeart").height() / 2 - 55;
var together=new Date();
together.setFullYear(2017, 2, 14);
together.setHours(19);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);
if (!document.createElement('canvas').getContext) {
var msg=document.createElement("div");
msg.id="errorMsg";
msg.innerHTML="Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
document.body.appendChild(msg);
$("#code").css("display", "none")
$("#copyright").css("position", "absolute");
$("#copyright").css("bottom", "10px");
document.execCommand("stop");
} else {
setTimeout(function () {
startHeartAnimation();
}, 5000);
timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 500);
adjustCodePosition();
$("#code").typewriter();
}
</script>
<div style="text-align:center;clear:both">
<p></p>
<p><a target="_blank"></a></p>
</div>
</body>
</html>
上面這個就是html的源碼,當然還有css和js的源碼我還沒有給到大家,主要是大家目前還沒有對html有個了解,再去學css和js就會有點懵逼的樣子了
那我從第一行開始講起吧,
第一行是告訴瀏覽器,我這個是HTML5,所以你要用h5的格式去解析。這個不是很重要,反正每個頁面上都有的。
第二行之前講過,我就不再敘述了,是html網頁的開頭標簽,相當于就是告訴html,我要開始寫代碼啦
第三行之前也講過,是html中的頭文件開頭標簽
第四行meta是告訴瀏覽器接受一個html文檔
等等,領導回來了……,我明天再說了
家好,這里是科技上善,今天為大家帶來幾款好玩的告白源碼,網頁特效。讓自己的告白變的瞬間高大上,可以把它發給自己喜歡的女孩或者男孩,瞬間讓(他)她們提高對你的好感度,這幾款源碼僅提供娛樂,在家用電腦進行簡單的修改,就可以把它發送給別人了,下面為大家展示一下。
第一款:表白樹HTML5源碼
這些表白字都可以自行的更改,相戀時間也可以修改,記住從何時戀愛,會自動計算相戀時間,根據自己情況更改。
HTML5源碼
HTML5源碼
第二款:愛你一輩子HTML5源碼
這些文字可以自己命名,把喜歡的人名字寫在上面,動畫效果,將發散的心隨機生成一個完整的心,很有趣的一款HTML5源碼。
HTML5特效源碼
HTML5特效源碼
HTML5特效源碼
第三款:愛的表白特效HTML5源碼
這款源碼中間的部分也是可以自己命名的,但只能命名英文,四周的心會不停地改變顏色,不停地旋轉,中間的字也會跟著一起旋轉,用鼠標控制旋轉方向以及旋轉速度,同樣也是HTML5特效源碼。
HTML5特效源碼
HTML5特效源碼
HTML5特效源碼
這些大家可以自行在網上搜索,也可以訂閱我的公眾號:kejishangshan 查看實用軟件即可獲得,每天為大家提供有趣的電腦,軟件,手機系統等有趣知識。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。