女朋友生日快樂代碼—>>>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>
照片最多六張不一樣的，最好裁剪成正方形。
電腦端效果：
手機端效果：
完整項目：
掃碼下載下傳位址—>>>520愛心表白代碼
支付寶掃碼支付後會得到百度網盤連結和提取碼。資源下載下傳解壓後裡面有詳細使用說明。