风拂鹊桥霓裳起
与卿漫话风雨里
初识
那一年端午
带着无比喜悦与期待
搭上去福州的火车
那一年端午
从福州到泉州
再到柴塔
连地名都好有神秘的感觉
迷糊的眼镜和疲倦的神情，刚好匹配得上
从此有了我们的传说
到了2022的七月七，还是一如既往
小特效
图片请换成期望的，然后再部署到服务器（最佳）或压缩文件给ta
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>hi girl</title><link rel="icon" href="./image/ax.png" type="image/x-icon"><link rel="stylesheet" href="./css/iconfont.css"><link rel="stylesheet" href="./css/t.css">
</head><body><canvas id="c" width="350" height="969" style="opacity: 1;"></canvas><div class="snowback"><div class="ziti" id="ziti"><span id="world">山有木兮木有枝，心悦君兮君不知</span></div><div class="main"><div class="box"><ul class="zhoxian1" style="transform: rotateY(-77deg) rotateX(-39deg);"><li class="small idv1"><img src="./image/img/111.jpg" alt=""></li><li class="small idv2"><img src="./image/img/222.jpg" alt=""></li><li class="small idv3"><img src="./image/img/333.jpg" alt=""></li><li class="small idv4"><img src="./image/img/444.jpg" alt=""></li><li class="small idv5"><img src="./image/img/555.jpg" alt=""></li><li class="small idv6"><img src="./image/img/666.jpg" alt=""></li></ul></div><div class="box-biger"><ul class="zhoxian2" style="transform: rotateY(-77deg) rotateX(-39deg);"><li class="biger idv7"><img src="./image/img/111.jpg" alt=""></li><li class="biger idv2"><img src="./image/img/222.jpg" alt=""></li><li class="biger idv3"><img src="./image/img/333.jpg" alt=""></li><li class="biger idv4"><img src="./image/img/444.jpg" alt=""></li><li class="biger idv5"><img src="./image/img/555.jpg" alt=""></li><li class="biger idv12"><img src="./image/img/666.jpg" alt=""></li></ul></div></div><canvas width="350" height="969"></canvas></div><div class="btn btnonlond" onclick="biggen()"><img class="btnimg" src="./image/mypic.gif" alt=""><!--可以搞点音乐<div class="hiddenbox"><div class="audiobox"><audio class="myaudio" src="xxx.mp3" autoplay="" controls="" loop=""></audio></div></div>-->
</div><script src="./js/jquery.min.js"></script>
<script src="./js/TweenMax.min.js"></script>
<script src="./js/script.js"></script>
<script src="./js/snow.js"></script>
<script>var zhoxian = document.querySelector(".zhoxian1");var zhoxian2 = document.querySelector(".zhoxian2");var yesno = 1;setInterval(function xuanzhuan() {if (yesno > 2) {var ss = Math.random();if (ss < 0.5) {leftbut();} else {rigthtop();}} else {yesno++;}}, 500);var ysize1 = 0,xsize2 = 0;rigthtop()function rigthtop() {var suiji = Math.random();ysize1 += 1 * (suiji * 20).toFixed(0) + 20;xsize2 += 1 * (suiji * 10).toFixed(0) + 10;var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;zhoxian.style.transform = world;zhoxian2.style.transform = world;yesno = 0;}function leftbut() {var suiji1 = Math.random();ysize1 -= 1 * (suiji1 * 20).toFixed(0) + 20;xsize2 -= 1 * (suiji1 * 10).toFixed(0) + 10;var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;zhoxian.style.transform = world;zhoxian2.style.transform = world;yesno = 0;}function onlyleft() {var suiji1 = Math.random();ysize1 -= 1 * (suiji1 * 20).toFixed(0) + 20;var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;zhoxian.style.transform = world;zhoxian2.style.transform = world;yesno = 0;}function onlyright() {var suiji = Math.random();ysize1 += 1 * (suiji * 20).toFixed(0) + 20;var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;zhoxian.style.transform = world;zhoxian2.style.transform = world;yesno = 0;}function onlytop() {var suiji1 = Math.random();xsize2 -= 1 * (suiji1 * 10).toFixed(0) + 10;var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;zhoxian.style.transform = world;zhoxian2.style.transform = world;yesno = 0;}function onlybtn() {var suiji = Math.random();xsize2 += 1 * (suiji * 10).toFixed(0) + 10;var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;zhoxian.style.transform = world;zhoxian2.style.transform = world;yesno = 0;}document.querySelector(".box-biger").onmousedown = function (evt) {var oevent = evt || event;var disx = oevent.clientX;var disy = oevent.clientY;document.onmousemove = function (evt) {var oevent = evt || event;evt.preventDefault();tuozhuaiX = oevent.clientX - disx + 'px';tuozhuaiY = oevent.clientY - disy + 'px';}document.onmouseup = function () {if (parseInt(tuozhuaiX) * parseInt(tuozhuaiX) > parseInt(tuozhuaiY) * parseInt(tuozhuaiY)) {if (tuozhuaiX[0] == '-') {onlyleft();} else {onlyright();}} else {if (tuozhuaiY[0] == '-') {onlybtn();} else {onlytop();}}document.onmousemove = null;document.onmouseup = null;}}var moustime = 0;document.getElementById("ziti").addEventListener("mouseenter", moveon);function moveon() {moustime++;setTimeout(function () {if (moustime == 1) {document.getElementById("world").innerHTML = "曾经沧海难为水，除却巫山不是云";moveon();} else if (moustime == 2) {document.getElementById("world").innerHTML =`<span class="iconfont icon-bqxin">人生自是有情痴，此恨不关风与月。<span class="iconfont icon-bqxin">`;moveon();} else if (moustime == 5) {document.getElementById("world").innerHTML =`<span class="iconfont icon-bqxin">身无彩凤双飞翼，心有灵犀一点通<span class="iconfont icon-bqxin">`;} else {moveon();}}, 2000)}document.getElementById("ziti").addEventListener("mouseleave", function () {moustime = 0;document.getElementById("world").innerHTML =`<span class="iconfont icon-bqxin">人生若只如初见，何事秋风悲画扇<span class="iconfont icon-bqxin">`;});
</script>
<script>var myaudio = document.querySelector(".myaudio");var btnimg = document.querySelector(".btnimg");var inpbtn = document.querySelector(".inpbtn");var input = document.querySelector("input");var isgo = 0;function biggen() {if (isgo == 0) {myaudio.play();btnimg.src = "./image/666.gif";isgo = 1;} else {myaudio.pause();btnimg.src = "./image/mypic.gif";isgo = 0;}}
</script></body></html>
