lovexhjTo520
/
index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
        />
        <link rel="icon" href="./favicon.ico" />
        <title>TQY & XHJ</title>
        <meta name="description" content="TQY & XHJ" />
        <meta name="keywords" content="tqy,xhj,520,n0ts" />
        <link rel="stylesheet" type="text/css" href="./css/lovexhj.css" />
        <link rel="stylesheet" href="./css/swiper.css" />
        <link rel="stylesheet" type="text/css" href="./css/FiraCode.css" />
        <!-- 背景音乐 -->
        <!-- <audio src="http://music.163.com/song/media/outer/url?id=186453.mp3" autoplay="autoplay"></audio> -->
    </head>

    <body>
        <!-- 标题板块 -->
        <div class="title">
            <img src="./images/bg1.gif" alt="bgGif" />
            <p id="tqyxhj"></p>
        </div>

        <!-- 分页1 - 骚话 -->
        <div class="page page1">
            <div class="swiper-container swiper-container-lovexhj1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="page1-lovexhj1">
                            <img src="https://q1.qlogo.cn/g?b=qq&nk=304915556&s=640" alt="xhj" />
                            <img src="./images/cat.gif" alt="cat" />
                            <img src="https://q1.qlogo.cn/g?b=qq&nk=1656071287&s=640" alt="tqy" />
                            <p id="lovetime"></p>
                            <p>我也不知道该准备一点什么给你逗你开心</p>
                            <p>还是写一点好玩的送给你吧~</p>
                            <span class="right">往右划动 →</span>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="page1-lovexhj1">
                            <img class="cat" src="./images/cat2.gif" alt="cat2" />
                            <p class="catText">你常对我发的表情 ↑</p>
                            <p>上次也是花心思写了一个小玩意给你</p>
                            <p>但我觉得整体设计&&界面都过于<b>LOW</b></p>
                            <p>那就重新送你一个吧</p>
                            <span class="right">再划一下 →</span>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="page1-lovexhj1">
                            <img class="cat" src="./images/cat3.gif" alt="cat3" />
                            <p class="catText">抱死你 ↑</p>
                            <p>这次我<b>超级超级超级超级</b></p>
                            <p>认真的写了一遍</p>
                            <p style="font-size: 13px">
                                以 框架构造、 <span style="color: red; font-size: 16px">爱你</span>、 视觉体验、响应式
                                为核心制作
                            </p>
                            <span class="right">再划一次吧 →</span>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="page1-lovexhj1">
                            <img class="cat" src="./images/cat4.gif" alt="cat4" />
                            <p class="catText">拍你猪头 ↑</p>
                            <p>这次应该不会太难看了吧</p>
                            <p>希望你喜欢呀</p>
                            <p>爱你哟(๑′ᴗ‵๑)</p>
                            <b>520快乐我的<span style="color: pink">猪</span></b>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination swiper-pagination-lovexhj1"></div>
            </div>
        </div>

        <!-- 分页2 - 时间轴 -->
        <div class="page page2">
            <div class="swiper-container swiper-container-lovexhj2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="page2-box">
                            <img src="./images/page-2-1.jpg" alt="page2-1" />
                            <p><b>故事的开始</b></p>
                            <p>2018-11-19</p>
                            <p>我们的故事，从此开始</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="page2-box">
                            <img src="./images/page-2-2.jpg" alt="page2-2" />
                            <p><b>第一次抱我大腿</b></p>
                            <p>还记得第一次你走不动的时候抱着我大腿不愿意走的时候吗？</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="page2-box">
                            <img src="./images/page-2-3.jpg" alt="page2-3" />
                            <p><b>第一次喝奶茶</b></p>
                            <p>你总是把腿搭在我的大腿上</p>
                            <p>扯你帽子的时候我们开心的和小孩一样</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="page2-box">
                            <img src="./images/page-2-4.jpg" alt="page2-4" />
                            <p><b>第一次走在雪地上</b></p>
                            <p>天气很冷，但与你在一起玩却很暖和</p>
                            <p>一起在雪地上涂鸦，看你画猪头哈哈</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="page2-box">
                            <img src="./images/page-2-5.jpg" alt="page2-5" />
                            <p><b>第一次庆祝你成年生日</b></p>
                            <p>刚在一起不久就赶上了你的成年生日</p>
                            <p>送你礼物的那一刻你笑的是多么的开心</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="page2-box">
                            <img src="./images/page-2-6.jpg" alt="page2-6" />
                            <p><b>第一次庆祝我的生日</b></p>
                            <p>吃牛排看电影</p>
                            <p>很俗气但很开心</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="page2-box">
                            <img src="./images/page-2-7.jpg" alt="page2-7" />
                            <p><b>第一次与你看电影</b></p>
                            <p>这应该算是第一次认真的看完了一部电影吧哈哈</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="page2-box">
                            <img src="./images/page-2-8.jpg" alt="page2-8" />
                            <p><b>第一次在深夜跑出来陪你</b></p>
                            <p>偶然条件下，凌晨三点我们在一起散步</p>
                            <p>安静的马路上充满了甜甜的感觉</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="page2-box">
                            <img src="./images/page-2-9.jpg" alt="page2-9" />
                            <p><b>第一次与你打游戏</b></p>
                            <p>看你输了“赛车”时生气的样子好好笑</p>
                            <p>并偷偷在后面摸了一下你的猪头</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="page2-box">
                            <img src="./images/page-2-10.jpg" alt="page2-10" />
                            <p><b>More？</b></p>
                            <p>篇幅有限，</p>
                            <p>丢一张丑照吧hahahahahah</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination swiper-pagination-lovexhj2"></div>
            </div>
        </div>

        <!-- 分页3 - 一段话 -->
        <div class="page page3">
            <div id="talkToXHJ">
                <b>回顾上一个520</b>
                <br />
                当时你从外面特地跑过来找我，我知道你超级超级害怕晕车，但是还是为了当天见到我，坐车回来了，当我听见你要回来的时候我还以为你在骗我哈哈，结果晚上真的见到你了，你一下车就冲过来抱住了我，这个画面回想起来仿佛就发生在昨天一样清晰...
                <br />
                <br />
                <b>这是我们的第二个520</b>
                <br />
                比较直男的我，还是用属于我的方式来送你一个小小的虚拟礼物（上次那个太不用心了哈哈）
                <br />
                这段时间经常告诉你我在写代码不能陪你玩，其实我都在花心思做这个呢，我想把它做到很好很好，让你感受一下“代码”带来了趣味性
                <br />
                用心才能做得更好，陪你也是这样，每天的事情大同小异，除去日常琐事剩下的就是陪你，日复一日但是每天都会是不同的感觉，带来不同的乐趣
                <br />
                陪你玩游戏，陪你聊天，一起互怼一起疯，看似再平常不过的事情在我们这里都充满了开心
                <br />
                <br />
                <b>我想</b>
                <br />
                我们还会有好多好多的520，不过每一次我都要尝试用新鲜的思路去给你带来一些值得回忆的瞬间还是很有挑战性的，对我来说给你准备惊喜的过程总是充满了动力
                <br />
                用文字来对你说一些话感觉好像情书一样尴尬哈哈，那就不说了我
                <br />
                节日快乐猪
                <br />
                ## 爱你的仔仔 (๑′ᴗ‵๑)~ ❤
            </div>
        </div>

        <!-- 分页4 - 结尾 -->
        <div class="page page4">
            <div class="page4-box">
                <div class="page4-img">
                    <div class="swiper-container swiper-container-lovexhj3">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="./images/page-4-1.png" alt="page-4-1" />
                            </div>
                            <div class="swiper-slide">
                                <img src="./images/page-4-2.jpg" alt="page-4-2" />
                            </div>
                            <div class="swiper-slide">
                                <img src="./images/page-4-3.jpg" alt="page-4-3" />
                            </div>
                            <div class="swiper-slide">
                                <img src="./images/page-4-4.jpg" alt="page-4-4" />
                            </div>
                            <div class="swiper-slide">
                                <img src="./images/page-4-5.jpg" alt="page-4-5" />
                            </div>
                            <div class="swiper-slide">
                                <img src="./images/page-4-6.jpg" alt="page-4-6" />
                            </div>
                            <div class="swiper-slide">
                                <img src="./images/page-4-7.jpg" alt="page-4-7" />
                            </div>
                            <div class="swiper-slide">
                                <img src="./images/page-4-8.jpg" alt="page-4-8" />
                            </div>
                            <div class="swiper-slide">
                                <img src="./images/page-4-9.jpg" alt="page-4-9" />
                            </div>
                            <div class="swiper-slide">
                                <img src="./images/page-4-10.jpg" alt="page-4-10" />
                            </div>
                        </div>
                        <div class="swiper-button-prev swiper-button-prev-lovexhj3"></div>
                        <div class="swiper-button-next swiper-button-next-lovexhj3"></div>
                    </div>
                </div>
                <div class="page4-text">
                    <h1>Send To Future</h1>
                    <p>有你在的每一天都如糖果一样甜</p>
                    <!-- <a href="https://blog.lovexhj.cn/" class="blog">进入我们的Blog</a> -->
                </div>
            </div>

            <div class="footer">
                <div class="footerBox">
                    <p>
                        &copy; 2020
                        <a href="https://love.n0ts.top">TQY && XHJ</a>
                    </p>
                    <p>THEME MADE BY <a href="https://love.n0ts.top">lovexhj</a></p>
                </div>
            </div>
        </div>

        <!-- 两只XHJ一样的猪 -->
        <div class="xhjIsPig">
            <img src="./images/pig1.gif" alt="pig1" class="pig1" />
            <img src="./images/pig2.gif" alt="pig2" class="pig2" />
        </div>

        <!-- js加载 -->
        <script src="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script>
        <script src="./js/typeit.min.js"></script>
        <script src="./js/swiper-3.4.2.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>

        <script src="./js/lovetime.js"></script>
        <script src="./js/talk.js"></script>
        <script src="./js/swiper.js"></script>
        <script src="./js/su.js"></script>
        <script>
            (function () {
                new WOW().init();
            })();
        </script>

        <script type="text/javascript">
            jQuery(document).ready(function ($) {
                $("body").wpSuperSnow({
                    flakes: ["./images/004.png", "./images/003.png", "./images/002.png", "./images/001.png"],
                    totalFlakes: "100",
                    zIndex: "999999",
                    maxSize: "30",
                    maxDuration: "20",
                    useFlakeTrans: false
                });
            });
        </script>
    </body>
</html>