风拂鹊桥霓裳起
与卿漫话风雨里
初识
那一年端午
带着无比喜悦与期待
搭上去福州的火车
那一年端午
从福州到泉州
再到柴塔
连地名都好有神秘的感觉
迷糊的眼镜和疲倦的神情，刚好匹配得上
从此有了我们的传说
到了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>