七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

📂文章目录

二、📚网站介绍

📒网站文件方面：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.视频演示

58-一起跨年(表白)

🧩 2.图片演示

html爱情表白网页模板下载_响应式爱情表白网页代码_HTML静态页面下载_学生网页作业

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我喜欢你❤️</title>

    <script>//判断客户端设备，选择写入meta
        function init_viewport(){
            if(navigator.userAgent.indexOf('Android') != -1){
                var version = parseFloat(RegExp.$1);
                if(version>2.3){
                    var width = window.outerWidth == 0 ? window.screen.width : window.outerWidth;
                    var phoneScale = parseInt(width)/500;
                    document.write('<meta name="viewport" content="width=500, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
                }else{
                    document.write('<meta name="viewport" content="width=500, target-densitydpi=device-dpi, user-scalable=0">');
                }
            }else if(navigator.userAgent.indexOf('iPhone') != -1){
                var phoneScale = parseInt(window.screen.width)/500;
                document.write('<meta name="viewport" content="width=500, min-height=750, initial-scale=' + phoneScale +', maximum-scale='+phoneScale+', user-scalable=0" /> ');         //0.75   0.82
            }else{
                document.write('<meta name="viewport" content="width=500, height=750, initial-scale=0.64" /> '); //0.75  0.82
            }
        }
        init_viewport();</script> 

    <style>* {
            padding: 0px;
            margin: 0px;
            -webkit-box-sizing: border-box;
        } 
        body {
            background-color: white;
        }
        a {
            color: white;
            text-decoration: none; 
        }

        #div_container { /*最外层div，用于居中兼容PC和移动*/
            width: 500px;
            margin: 0px auto; 
            position: relative; 
            /*background-color: #FAFAFA;*/
            font-size: 1em;
        }


        .div_pure_words { /*文字部分的最外层，用于定位*/
            position: relative;
            display: none;
        }
        .div_pure_words_bg { /*背景设置在这里*/
            background-repeat: repeat; 
            background-size: 100%; 
            background-attachment: fixed; 
            width: 500px;
            min-height: 500px; 
        }
        .div_pure_words_height {
            visibility: hidden;
            padding: 30px; 
            text-align: justify;  /*为了使文字两端对齐 */
            white-space: pre-wrap; /*保留换行效果*/
            font-size: 1.1em;
            font-family: "Microsoft YaHei","Arial";
            color: white; 
        }
        .div_pw_typed {
            position: absolute;
            left: 0;
            right: 0;  /*4个方向定位使div充满整个画画*/
            top: 0;
            bottom: 0;  /*4个方向定位使div充满整个画画*/
            width: 500px;            
            background:rgba(255,255,255,0.8); /*半透明效果*/
            padding: 30px; 
            text-align: justify;  /*为了使文字两端对齐 */
        } 
        #span_pw_typed {
            width:100%; /*为了使文字两端对齐 */ 
            white-space:pre-wrap; /*保留换行效果*/ 
            font-size: 1.1em;
            font-family: "Microsoft YaHei","Arial";
        }


        #div_start_bg{
            width: 100%; height: 100%;
            position: absolute;
            left: 0px; top: 0px;
            z-index: 44;
            background-color: white;
        }</style>

    <!-- 按钮部分的样式 -->
    <link type="text/css" rel="stylesheet" href="css/theme_public_btn.css">


        

        

     

     

      

    <!-- 按需加载，选择此片头时方才加载 -->
        <link type="text/css" rel="stylesheet" href="css/start_onlyyou.css"> 

     
</head>

<body>
    <div id="div_container"> <!-- 最外层div，用于居中兼容PC和移动 --> 
        <div id="div_start_bg"></div> <!-- 用于遮挡主题，作为片头的背景 -->

                

        <!-- 按需加载，选择此片头时方才加载 -->



        


          



        


        <!-- 按需加载，选择此片头时方才加载 -->
            <div id="div_onlyyou"><!-- 用于设置背景 -->
                <div id="div_oy_inner"><!-- 用于存放content --> 
                    <div class="div_oy_text">
                        <h1></h1>
                        <img class="img_oy_text" src="">
                        <p class="p_oy_text"></p>
                        <ul id="ul_oy_benefit">
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                            <li class="li_oy_benefit"></li>                             
                        </ul> 
                    </div> 
                    <ul id="ul_oy_btn">
                        <li onclick="oy_go_next()">Yes  ❤</li>
                        <li onclick="oy_show_benefit()">No  ✖</li>
                    </ul>
                    <div id="div_oy_note" onclick="oy_hide_note()">
                        <img src="images/emoji_kelian.jpg" alt=""><br>
                        请告诉我Yes！
                        <div id="div_oy_note_close">✖</div>
                    </div>
                    <div id="div_oy_yes">
                        <img src="images/emoji_bixin.jpg" alt=""><br>
                        太好了！哈哈~ 
                    </div>
                </div>
            </div>        
  
        <!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 -->
        <!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 -->
        <!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 -->
        <!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 -->
        <!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 -->






        <div class="div_pure_words"> <!-- 文字部分的最外层，用于定位 -->
            <div class="div_pure_words_bg"><!-- 背景设置在这里 -->
                <div class="div_pure_words_height"> 
                    <!-- 正文的内容复制到这里面，撑开整个文档的高度 -->
                </div>
            </div> 
            <div class="div_pw_typed"> <!-- 正文部分，绝对定位 --> 
                <span id="span_pw_typed"></span>
            </div> 
        </div>





        


        
        <div id='div_btn_container'> <!-- 按钮部分的最外层，处于文档流之中 -->
            <div id="div_btn_inner"> <!-- 按钮部分内层，用于定位 -->

                <div class='div_music_tips'></div>
                <div class="div_btn" id="div_music" onclick="music_switch()"> <!-- 音乐按钮部分 -->
                    <img id='img_music' src='images/music_note_big.png' style='-webkit-animation:music_play_rotate 1s linear infinite'> 
                    <audio id="audio_music" autoplay="autoplay" loop="loop">
                        <source type="audio/mpeg"/>  
                        <!-- 您的浏览器不支持播放音乐 -->
                    </audio>
                </div>

                <div class='div_record_tips'></div>
                <div class="div_btn" id="div_record" onclick="record_switch()"> <!-- 录音按钮部分 -->
                    语音
                    <audio id="audio_record" loop="loop">
                        <source type="audio/mpeg"/>  
                        <!-- 您的浏览器不支持播放音乐 -->
                    </audio>
                </div>
                
                <!-- 只在提交状态显示 只在提交状态显示 只在提交状态显示 只在提交状态显示 -->
                <div class="div_btn" id='div_support'>
                        <a href="https://www.gwents.com/tag/%E8%A1%A8%E7%99%BD%E6%BA%90%E7%A0%81"><span>更多</span></a>
                    </div>  
                <!-- 只在提交状态显示 只在提交状态显示 只在提交状态显示 只在提交状态显示 -->

                <!-- 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 -->
                  
                <!-- 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 -->
            </div> 
        </div>
    </div>







    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/typed.min.js"></script>
    <script src="js/support_upload_as.js"></script>
    <script src="js/jweixin-1.2.0.js"></script>
    <script>var window_height=$(window).height();
        console.log('window_height ->'+window_height);

        var theme='pure_words';
        console.log('theme ->'+theme);
        var theme_content={"pure_words_content":"\u9047\u89c1\u4f60\u662f\u6211\u6240\u6709\u7f8e\u597d\u6545\u4e8b\u7684\u5f00\u59cb\uff0c\u6240\u4ee5\uff0c\u8bf7\u522b\u653e\u5f00\u6211\u7684\u624b\uff0c\u4e5f\u522b\u7f3a\u5e2d\u6211\u7684\u5c06\u6765\uff0c\u56e0\u4e3a\u4e00\u8f88\u5b50\u548c\u4f60\u5728\u4e00\u8d77\u624d\u53eb\u5c06\u6765\ud83d\udc95","typed_bool":"typed_y","cursor_char":"cursor_heart","bg_style_pure_words":"bg_opacity","bg_img":"3.jpg","simple_page_content":"","video_page_content":""};
        console.log(theme_content);

        var music_json={"music_select":"m_online","m_online_id":"7","m_online_url":"http://music.163.com/song/media/outer/url?id=1396568325.mp3","m_upload_name":"null","m_upload_url":"null"};
        console.log(music_json);
        var record_json={"record_bool":"r_false","r_wechat_time":"null","r_wechat_url":"null","r_wechat_amr":"null"};
        console.log(record_json);
        var signPackage={"appid":"wx47f716bdd7699533","timestamp":1581680313,"nonceStr":"sCOFuLAhrZrcoo8t","url":"http:\/\/www.makusi.cn\/Home\/Play\/play_show\/ws\/YGdnn2pi","signature":"dcd2bceecb6173f8962220309bf9b36229ff7236","rawString":"jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VHINcjHJVwMsFjJyfreRy7Cirs1niLvtMUWlkXLIkXzDjXhEIIg2D4CYYPfKu6MV8w&noncestr=sCOFuLAhrZrcoo8t×tamp=1581680313&url=http:\/\/www.makusi.cn\/Home\/Play\/play_show\/ws\/YGdnn2pi"};

        var main_title='我喜欢你❤️';
        // console.log(main_title);
        if(main_title=='' || main_title=='null'){  //允许标题为空
            document.title='慢慢喜欢你';
        } 
        // console.log(""); 


        var pure_words_content=theme_content['pure_words_content'];
        var str_cursorChar; 
        var typed_bool;

        var interval_pw_height;
        var height_div_pw=$(".div_pure_words_height").height();
        function init_pure_words(){
            //允许内容为空时直接展示，不设置为随机内容，用于空主题
            if(typeof(pure_words_content)=='undefined'){ //处理全新作品
                var array_str_temp=[];
                random_text_array(array_str_temp,12); //获取随机的模板文字
                // array_str_temp.push('你现在看到的只是案例，文字是可以自定义哒，6000字以下');
                pure_words_content=array_str_temp.join('\r\r');
            }
            $(".div_pure_words_height").html(pure_words_content+'22222');  //初始化复制内容，撑开文档高度            
            
            // 初始化设置div的bg图片 初始化设置div的bg图片
            if(typeof(theme_content['bg_style_pure_words'])!='undefined' && theme_content['bg_style_pure_words']=='bg_opacity'){
                if(typeof(theme_content['bg_img'])!='undefined' && theme_content['bg_img']!=''){                    
                    $(".div_pure_words_bg").css({"background-image": "url("+theme_content['bg_img']+")"});
                }
            } 

            //以下是打字效果的js 
            if(typeof(theme_content['cursor_char'])!='undefined' && theme_content['cursor_char']!=''){
                switch(theme_content['cursor_char']){ //设置打字光标的样式
                    case 'cursor_heart':
                        str_cursorChar='❤';
                        break;
                    case 'cursor_sub':
                        str_cursorChar='_';
                        break;
                    case 'cursor_music':
                        str_cursorChar='♫';
                        break;
                    case 'cursor_star':
                        str_cursorChar='★';
                        break;
                    case 'cursor_sun':
                        str_cursorChar='☀';
                        break;
                    default:
                        str_cursorChar='|';
                }
            }else{ //处理全新作品，默认显示打字效果
                str_cursorChar='❤';
            }
            
            //判断用户有没有选择打字效果
            if(typeof(theme_content['typed_bool'])!='undefined' && theme_content['typed_bool']!=''){
                typed_bool= theme_content['typed_bool']=='typed_y' ? true : false;                  
            }else{
                typed_bool=false; //默认显示打字效果
            } 
            // console.log(typed_bool);
        
            display_pure_words(); 
            $(".div_pure_words").fadeIn();
            
            interval_pw_height=setInterval(function(){
                console.log('div_pure_words_height -> '+$('.div_pure_words_height').height());
                var least_height_div_pw=$('.div_pure_words_height').height();
                if(least_height_div_pw>height_div_pw){
                    height_div_pw=least_height_div_pw;
                }else{
                    clearInterval(interval_pw_height);
                    $(".div_pure_words_height").height(least_height_div_pw+100);
                    if($(".div_pure_words_height").height()<window_height){
                        $(".div_pure_words_height").height(window_height); //不能小于窗口的高度
                        console.log('let us be high as window');
                    } 
                }
            },100);
        }

        
        function display_pure_words(){
            if(typed_bool){ 
                var typed_pure_words = new Typed('#span_pw_typed', {
                    strings: [pure_words_content], //输入内容, 支持html标签
                    typeSpeed: 120, //打字速度
                    cursorChar: str_cursorChar,//替换光标的样式
                    contentType: 'html', //值为html时，将打印的文本标签直接解析html标签
                    onComplete: function(abc){
                                // console.log(abc); 
                                console.log('finished typing words'); 
                                // console.log($('#span_pw_typed').height()-$(".div_pure_words_height").height());
                            },
                });
            }else{
                //如果不需要打字效果就直接显示
                $("#span_pw_typed").html(pure_words_content).fadeIn(); 
            }
            init_attachment();
        } 


        function random_text_array(temp_array,length){  //获取随机的模板文字
            console.log('random_text_array');
            var random_array=[];
            while(random_array.length<length){
                // var random_num=Math.floor(Math.random()*(array_as_pics.length-0))+0;
                var random_num=Math.floor(Math.random()*(array_as_words_love.length)); //随机取值 
                if(random_array.indexOf(random_num)==-1){
                    random_array.push(random_num);
                }
            }
            // console.log(random_array);
            for(var i=0; i<length; i++){  
                temp_array.push(array_as_words_love[random_array[i]]); //获取随机的模板文字
            }
        }</script>







        

     <!-- 按需加载，选择此片头时方才加载 -->
    

    <script>var start_content={"chase_title":"\u505a\u6211\u5973\u670b\u53cb\u597d\u4e0d\u597d\ud83d\udc95","chase_text":"\u627f\u8499\u4f60\u7684\u51fa\u73b0\uff0c\u591f\u6211\u559c\u6b22\u597d\u591a\u5e74\uff0c\u6211\u5e0c\u671b\uff0c\u4ee5\u540e\u4f60\u80fd\u7528\u6211\u7684\u540d\u5b57\u62d2\u7edd\u6240\u6709\u4eba\ud83d\udc95","chase_benefit":["\u4f60\u662f\u6211\u62d4\u6389\u6c27\u6c14\u7f50\u90fd\u60f3\u543b\u7684\u4eba","\u4f60\u662f\u6211\u8dd1\u5b8c8000\u7c73\u8fd8\u60f3\u62e5\u62b1\u7684\u4eba","\u4f60\u662f\u6211\u81ea\u7f5a\u4e09\u676f\u90fd\u4e0d\u80af\u5f00\u53e3\u7684\u79d8\u5bc6","\u4f60\u662f\u6211\u8d74\u6c64\u8e48\u706b\u90fd\u4e0d\u80af\u653e\u4e0b\u7684\u6267\u7740","\u4f60\u662f\u6211\u7535\u91cf\u53ea\u52691%\u4e5f\u60f3\u56de\u4fe1\u606f\u7684\u4eba","\u4f60\u662f\u6211\u7a77\u6781\u4e00\u751f\u4e0d\u60f3\u9192\u6765\u7684\u68a6"],"bg_style":"bg_custom","bg_img":"2.jpg","img_bool":"img_true","img_src":"1.gif"}; //可能为null
        console.log(start_content); 

        var start_id;
        $(function(){
            //此事件为触发互动创意
            start_id='onlyyou'; //可能为null
            init_start(start_id);
        });
        
        function init_start(start_id){ 
            console.log('init_start ->'+start_id);
            switch(start_id){
                case 'loveformat':
                    $('.div_loveformat').show();
                    init_loveformat();
                    break;
                case 'hearttree':
                    $('#div_hearttree').show();
                    init_hearttree();
                    break;
                case 'courage':
                    $('#div_courage').show();
                    init_courage();
                    break;
                case 'birthdaycake':
                    $('#div_dbcake').show();
                    init_birthdaycake();
                    break;
                case 'intersect':
                    $('#div_intersect').show();
                    init_intersect();
                    break;
                case 'onlyyou':
                    $('#div_onlyyou').show();
                    init_onlyyou();
                    break;
                default:
                    init_theme(); 
            }
        } 

        //开始动画主体部分
        function init_theme(){
            console.log('init_theme');
            $('#div_start_bg').fadeOut();
            init_pure_words();            
        }</script>




    

        

    

    

     


    <!-- 按需加载，选择此片头时方才加载 -->
        <script src="js/start_onlyyou.js"></script>        



    <script>var attachment='null'; //可能为null
        var attached_content={"bool_save":false}; //可能为null
        console.log(attached_content); 
       
        function init_attachment(){  //开始attachment
            console.log('init_attachment ->'+attachment);
            switch(attachment){
                case 'timer':
                    init_at_timer();
                    break;
                default:
                    return; 
            }
        }</script>

    


    <script src='js/jweixin-1.2.0.js'></script>
    <script src='js/theme_common.js'></script> <!-- 音乐控制和微信设置等公共部分js外部引入 -->





</body>
</html>

🏠CSS样式代码

#div_onlyyou {
            position:relative;
            width: 100%;
            z-index:666;
            background-size: 100%;
            background-repeat: repeat; 
            display: none;
        }
        #div_oy_inner {
            position:absolute;
            top: 0;right: 0;left: 0;bottom: 0; 
            width: 100%;
            min-height:400px; 
            padding: 12% 10% 0% 10%;
            background: rgba(255,255,255,.8);            
            text-align: center; 
        }

        .div_oy_text { 
            font-weight: 300;
            text-align: left;
            font-size: 1.1em;
            margin: 0px auto 60px auto;
        }
        .div_oy_text h1 {
            font-size: 1.8em;
            margin: 14px 0;
        }
        .div_oy_text p {
            margin: 14px 0;
        }
        .div_oy_text img {
            width: 100%;
            border-radius: 5px;            
        }

        #ul_oy_benefit li {
            display: none;
            margin: 14px 0;
        }


        #ul_oy_benefit, #ul_oy_btn {
            list-style: none; 
        }
        #ul_oy_btn li {
            background-color: rgba(0,0,0,0.6);
            display: inline;
            margin: 20px 40px;
            padding: 10px 15px;
            font-size: 1.4em;
            border: 1px solid white;
            border-radius: 5px;
            color: white;
        }
        #div_oy_note, #div_oy_yes {
            position: relative;
            margin: -60px auto;
            padding: 5% 0;
            width: 100%;
            height: 180px;
            text-align: center;
            background-color: white;
            border-radius: 5px;
            display: none;
            color: gray;
            font-size: 1.4em;
        }
        #div_oy_note_close {
            width: 40px; height: 40px;
            position: absolute;
            right: 20px;
            top: 20px;
        }

五、🎁更多源码

1.如果我的博客对你有帮助 ​​请 “👍点赞” “✍️评论” “💙收藏” ​​一键三连哦！

2.​​💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 ​​带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻