HTML實作表白biu愛心特效 (程式員專屬情人節表白網站)

七夕來襲！是時候展現專屬于程式員的浪漫了！你打算怎麼給心愛的人表達愛意？鮮花禮物？代碼表白？還是創意DIY？或者…無論那種形式，快來秀我們一臉吧！

📂文章目錄

二、📚網站介紹
三、🔗網站效果

▶️1.視訊示範
🧩 2.圖檔示範

四、💒 網站代碼

🧱HTML結構代碼
🏠CSS樣式代碼

五、🎁更多源碼

二、📚網站介紹

📒網站檔案方面：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；

📙網頁編輯方面：可使用任意HTML編輯軟體（如：

Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++

等任意html編輯軟體進行運作及修改編輯等操作）。

其中：

（1）📜html檔案包含：其中index.html是首頁、其他html為二級頁面；

（2）📑 css檔案包含：css全部頁面樣式,3D動态效果,雪花飄落等等

（3）📄 js檔案包含：頁面炫酷效果實作

三、🔗網站效果

▶️1.視訊示範

98-情人節愛你的代碼

🧩 2.圖檔示範

四、💒 網站代碼

🧱HTML結構代碼

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>I Love You Forever</title>
    <meta name="author" content="Mike">
    
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <!--導庫-->
    <script type="text/javascript" src="js/jquery.js"></script>
    <!-- 圖檔幻燈片效果-->
    <script type="text/javascript" src="js/roundabout.js"></script>
    <script type="text/javascript" src="js/roundabout_shapes.js"></script>
    <script type="text/javascript" src="js/gallery_init.js"></script>
    <!-- 下雪-->
    <script type="text/javascript" src="js/snowstorm.js"></script>
    <!-- 打字機效果-->    
    <script type="text/javascript" src="js/text.js"></script>
    <!-- 畫愛心-->
    <script type="text/javascript" src="js/ga.js" async=""></script>
    <script type="text/javascript" src="js/heart.js"></script>
    <!-- 移動div-->
    <script type="text/javascript" src="js/move.js"></script>
    <!-- 顯示時間 -->
    <script type="text/javascript" src="js/time.js"></script>
    <!-- 設定文字跟随滑鼠 -->
    <script type="text/javascript" src="js/makesnake.js"></script></head><body>
    <!-- thanks for watching! -->
    <span id="span0" class="spanstyle">T</span><span id="span1" class="spanstyle">h</span>
    <span id="span2" class="spanstyle">a</span><span id="span3" class="spanstyle">n</span>
    <span id="span4" class="spanstyle">k</span><span id="span5" class="spanstyle">s</span><span id="span6" class="spanstyle">
     </span><span id="span7" class="spanstyle">f</span><span id="span8" class="spanstyle">o</span><span id="span9" class="spanstyle">r</span>
     <span id="span10" class="spanstyle"> </span><span id="span11" class="spanstyle">w</span>
     <span id="span12" class="spanstyle">a</span><span id="span13" class="spanstyle">t</span><span id="span14" class="spanstyle">c</span><span id="span15" class="spanstyle">h</span>
     <span id="span16" class="spanstyle">i</span><span id="span17" class="spanstyle">n</span><span id="span18" class="spanstyle">g</span><span id="span19" class="spanstyle">!</span>
  

  
    <script type="text/javascript">setTimeout(makesnake, 42000);</script>
    <!--#Header-->
    <div id="header" style="opacity:0.85">
      <div id="title">
        I Love You Forever
      </div>
    </div>

    <!-- #myContent -->
    <div id="myContent">
        <span id="blink" style="display: none;">_</span></div>
    <div id="contentToWrite" style="display:none">
      一時間不知道從哪說起,         <br>
        真愛來了，我們要好好把    <br>
        一時間不知道從哪說起,         <br>
        真愛來了，我們要好好把握。不管面臨多大的壓力，<br>
        不管前面的路如何崎岖.<br>
        不管經曆過什麼,我仍堅信最浪漫的事就是和<br>
        你一起慢慢變老.<br>
        還記得否,曾經的點點滴滴，從相識到現在，<br>
        從冷漠到關心,從謝絕到依賴，從生疏到相愛,<br>
        一切似乎都是那麼遙遠,又似乎那麼觸手可及.<br>
        正如某人說的那樣,但求歲月靜好,現世安穩.<br>
        一生守候不是一句簡單而蒼白的山盟海誓，<br>
        而是無數個平淡的日子同舟共濟，相濡以沫.<br>
        相信右下角的計時器,将永遠繼續下去,直至資料溢出.<br>
        <br>
        -----------------------Just for You, YaRu<br>
    </div>
    <script type="text/javascript">writeContent(true);</script>
    

    <!-- #container -->
    <div id="container">
      <ul id="myRoundabout" class="roundabout-holder" style="padding: 0px; position: relative; z-index: 100;">
        <li class="roundabout-moveable-item roundabout-in-focus" current-scale="1.0000" style="position: absolute; left: 122px; top: 87px; width: 350px; height: 222px; opacity: 1; z-index: 400; font-size: 16px;"><img src="img/1.jpg" alt=""></li>
      <li class="roundabout-moveable-item" current-scale="0.7927" style="position: absolute; left: -0.4px; top: 110px; width: 277.445px; height: 175.9794px; opacity: 1; z-index: 296; font-size: 12.68px;"><img src="img/2.jpg" alt=""></li>
      <li class="roundabout-moveable-item" current-scale="0.4573" style="position: absolute; left: 473.8px; top: 147.2px; width: 160.055px; height: 101.5206px; opacity: 1; z-index: 129; font-size: 7.32px;"><img src="img/3.jpg" alt=""></li>
      <li class="roundabout-moveable-item" current-scale="0.4573" style="position: absolute; left: -39.8px; top: 147.2px; width: 160.055px; height: 101.5206px; opacity: 1; z-index: 129; font-size: 7.32px;"><img src="img/4.jpg" alt=""></li>
      <li class="roundabout-moveable-item" current-scale="0.7927" style="position: absolute; left: 317px; top: 110px; width: 277.445px; height: 175.9794px; opacity: 1; z-index: 296; font-size: 12.68px;"><img src="img/5.jpg" alt=""></li>
      </ul>
    </div>
    <script type="text/javascript">setTimeout(move, 15000);</script>
      
      <!-- #bg -->
    <div id="bg">
      <canvas id="garden" width="1583" height="709"><c style="color: #FFF; text-shadow:2px 3px 3px #222; font-family:Microsoft YaHei; font-size:50px">你的浏覽器過時了,試試火狐吧!</c></canvas>
    </div>

    <!-- #time -->
    <div id="time">
      <span id="show"></span>
      <script type="text/javascript">setTimeout("showTime()", 40000);</script>
    </div>

  
  

</body>

🏠CSS樣式代碼

/* Global properties ======================================================== */
body { 
    background:#6f599c;
    background-image:url(../images/bg.jpg) ;
    text-align:left;
}

/* Global Structure ============================================================= */
/* Header */
#header{
    position:absolute;
    left:0px;
    top:5px;
    overflow:hidden;
    height:70px;
    font-family:Microsoft YaHei;
    font-weight: 900;
    font-size:40px;
    padding-bottom:5px;
    width: 100%;
    filter:alpha(opacity=70);
    -moz-opacity:0.7;
    opacity:0.7;
}
    
#myContent{
    position:absolute;
    left:80px;
    top:130px;
    overflow:hidden;
    text-shadow: 2px 3px 3px #000; 
    font-family:Microsoft YaHei;
    font-style:italic;
    font-weight:500;
    font-size:20px;
    color:#CCCCCC;
}

#container{
    overflow:hidden;
    position:absolute;
    left:630px;
    top:220px;
    width:650px;
    opacity:0;
    filter:alpha(opacity=0.7)
}

#title{
    position:absolute;
    left:28%;
    top:0px;
    padding:10px;
    overflow:hidden;
    text-shadow: 2px 3px 3px #222; 
    color:#CCCCCC;
}

#footer {
    position:absolute;
    left:32%;
    top:91%;
    overflow:hidden;
    text-shadow: 2px 3px 3px #222; 
    font-family:Microsoft YaHei;
    font-style:italic;
    font-size:20px;
    color:#CCCCCC;
}



#time{
    position:absolute;
    left:750px;
    top:400px;
    overflow:hidden;
}

#show{
    color:#CCCCCC;
    text-shadow: 2px 3px 3px #222; 
    font-family:Microsoft YaHei;
    font-style:italic;
    font-size:20px;
}


#bg{
    overflow:hidden;
}

.roundabout-holder  { 
    width:600px;
    height:400px;
    margin:0 auto;
}
.roundabout-moveable-item {
    width: 350px;
    height: 222px;
    cursor: pointer;
    border:3px solid #ccc;
    border:3px solid rgba(0, 0, 0, 0.08);
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
.roundabout-moveable-item img{
    width:100%;
}
.roundabout-in-focus {
    border:3px solid rgba(0, 0, 0, 0.2);
}

ol, ul {
    list-style: none;
}

img {
    vertical-align:top; 
}

.spanstyle{
    color:#CCFF99;
    font-family:courier;
    text-shadow: 2px 2px 1px #222; 
    font-style:italic;
    font-weight:600;
    font-size:20px;
    position:absolute;        /* ç»å¯¹å®šä½ */
    top:-50px;
    overflow:hidden;
}

五、🎁更多源碼

1.如果我的部落格對你有幫助

請 “👍點贊” “✍️評論” “💙收藏”

一鍵三連哦！

HTML實作表白biu愛心特效 (程式員專屬情人節表白網站)

📂文章目錄

二、📚網站介紹

三、🔗網站效果

▶️1.視訊示範

🧩 2.圖檔示範

四、💒 網站代碼

🧱HTML結構代碼

🏠CSS樣式代碼

五、🎁更多源碼

繼續閱讀

請求逾時VUE axios重新再次請求

IE8 CSS設定DIV居中，添加“margin:0 auto”

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

403 Forbidden，You don't have permission to access / on this server.Forbidden

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條