520表白代码

article/2025/9/21 16:57:27

女朋友生日快乐代码—>>>html生日快乐代码
html表白代码大全—>>>html表白代码大全
个人主页地址：皮小孩的个人主页

很多朋友想几个代码组合在一起，于是我做了这个效果。中间是爱心包围的照片（照片可以换多张），旁边是文字，另外还有背景音乐。
完整项目地址—>>>520爱心表白代码
支付宝扫码支付后会得到百度网盘链接和提取码。

核心代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>宝贝老婆</title><style>
html, body {height: 100%;padding: 0;margin: 0;background: #000;
}
canvas {position: absolute;width: 100%;height: 100%;
}</style>
</head>
<body><canvas id="pinkboard"></canvas><script>
/** Settings*/
</script>
<audio autoplay="autopaly" loop="loop" id="audios" preload="auto"><source src="http://music.163.com/song/media/outer/url?id=526464145.mp3" />
</audio><style type="text/css">*{margin: 0;padding: 0;}.wrap{width: 600px;height: 400px;margin: 200px auto;position:absolute;left:30%}.box{width: 200px;height: 200px;margin: 100px auto;position: relative;transition: all 3s;transform-style: preserve-3d;animation: move 3s infinite linear alternate;}.box>div{width: 200px;height: 200px;font-size: 60px;opacity: .9;position: absolute;top: 0;left: 0;transition: all 1s;}.box img{width: 200px;height: 200px;}.left{transform: rotateY(90deg) translateZ(-100px);}.right{transform: rotateY(90deg) translateZ(100px);}.top{transform: rotateX(90deg) translateZ(100px);}.bottom{transform: rotateX(90deg) translateZ(-100px);}.after{transform: translateZ(-100px);}.before{transform: translateZ(100px);}.wrap .box:hover .left{transform: rotateY(90deg) translateZ(-160px);}.wrap .box:hover .right{transform: rotateY(90deg) translateZ(160px);}.wrap .box:hover .top{transform: rotateX(90deg) translateZ(160px);}.wrap .box:hover .bottom{transform: rotateX(90deg) translateZ(-160px);}.wrap .box:hover .after{transform: translateZ(-160px);}.wrap .box:hover .before{transform: translateZ(160px);}@keyframes move{from{transform: rotateX(20deg) rotateY(0deg);}to{transform: rotateX(13deg) rotateY(720deg);}}</style>
</head><div class="wrap"><div class="box"><div class="left"><img src="./images/1.jpg" alt=""></div><div class="right"><img src="./images/1.jpg" alt=""></div><div class="top"><img src="./images/1.jpg" alt=""></div><div class="bottom"><img src="./images/1.jpg" alt=""></div><div class="after"><img src="./images/1.jpg" alt=""></div><div class="before"><img src="./images/1.jpg" alt=""></div></div></div></body>
</html>