终身VIP
性别保密
威望 点
注册时间2016-3-9
最后登录1970-1-1
在线时间 小时
好友
UID45272
听众
阅读权限200
- 积分
- 104148
 鲜花( 6292)  鸡蛋( 6)
|
<br><br><br><style>
.mnBox { position: relative; display: flex; justify-content: center; align-items: center; width: 1024px; height: 600px; left: 200px; perspective: 1000px; }
.imgBox { --w: 250px; --h: 400px; position: absolute; width: var(--w); height: var(--h); cursor: pointer; transform-style: preserve-3d; }
.imgBox img { width: var(--w); height: var(--h); position: absolute; }
@keyframes rotate { 100% { transform: rotateY(360deg); } }
</style>
<div class="mnBox">
<div class="imgBox"></div>
</div>
<script language="javascript">
let picAr = [
"https://pic.imgdb.cn/item/6325c2e916f2c2beb14bd1f9.png",
"https://pic.imgdb.cn/item/6325546116f2c2beb1bef779.jpg",
"https://pic.imgdb.cn/item/6325547616f2c2beb1bf1e50.jpg",
"https://pic.imgdb.cn/item/6325548b16f2c2beb1bf433a.jpg",
"https://pic.imgdb.cn/item/6325c2e916f2c2beb14bd1f9.png",
"https://pic.imgdb.cn/item/6325552116f2c2beb1c063ac.jpg",
"https://pic.imgdb.cn/item/632554d816f2c2beb1bff56c.jpg",
"https://pic.imgdb.cn/item/632554f416f2c2beb1c0239e.jpg",
];
let iBox = document.querySelector(".imgBox");
let hStr = "";
let angle = 360 / picAr.length;
let tz = Math.tan(Math.PI / 180 * (180 - angle) /2 ) * iBox.clientWidth / 2;
for(j=0; j<picAr.length; j++) {
//hStr += `<div style="transform: rotateY(${angle*j}deg) translateZ(${tz}px);"><img alt="" src="${picAr[j]}" /></div>\n`;
hStr += `<div><img alt="" src="${picAr[j]}" /></div>\n`;
}
iBox.innerHTML = hStr;
let au = document.createElement("audio");
au.src = "https://music.163.com/song/media/outer/url?id=1437840171.mp3";
au.autoplay = true;
au.loop = true;
document.querySelector(".mnBox").appendChild(au);
iBox.onmousemove = function(){ iBox.style.animationPlayState = "paused"; }
iBox.onmouseout = function(){ iBox.style.animationPlayState = "running"; }
iBox.onclick = function() {
au.paused ? (au.play(), this.style.animationPlayState = "running") : (au.pause(), this.style.animationPlayState = "paused");
}
setTimeout(function() {
let children = iBox.children;
for(j=0; j<picAr.length; j++) {
children[j].style.transform = `rotateY(${angle*j}deg) translateZ(${tz}px)`;
}
iBox.style.animation = "rotate 80s linear infinite";
},10000);
</script><br><br><br><br><br><br> |
|