《太极》- 邓伟标 （学习老黑“鸟语”制作）
本帖最后由 加林森 于 2022-7-29 18:43 编辑 <br /><br /><style>#papa { left: -242px; width: 1080px; height: 450px; background: silver url('https://pic.imgdb.cn/item/62e34d01f54cd3f9376dfee4.jpg') no-repeat center/cover; perspective: 2000px; box-shadow: 4px 4px 24px #000; position: relative; }
#wrapper { position: absolute; width: 200px; height: 200px; left: 35%; top: 30%; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(-20deg); cursor: pointer; }
#wrapper { position: relative; width: 80px; height: 80px; left: 30%; top: 75%; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(-20deg); cursor: pointer; }
#mypic { position: absolute; width: 50px; height: 50px; transform: translateZ(15px) translateY(30px) translateX(15px); }
#wrapper>span:nth-child(1) { transform: translateZ(40px); background: teal; }
#wrapper>span:nth-child(2) { transform: translateZ(-40px); background: lightgreen; }
#wrapper>span:nth-child(3) { transform: translateX(-40px) rotateY(90deg); background: aquamarine; }
#wrapper>span:nth-child(4) { transform: translateX(40px) rotateY(90deg); background: green; }
#wrapper>span:nth-child(5) { transform: translateY(-40px) rotateX(90deg); background: olive; }
#wrapper>span:nth-child(6) { transform: translateY(40px) rotateX(90deg); background: tan; }
.panel { position: absolute; width: 80px; height: 80px; text-align: center; opacity: 0.25;}
//.panel { position: absolute; width: 80px; height: 80px; text-align: center; transition: all 2s; }
</style>
<div id="papa">
<div id="wrapper">
<span class="panel"></span>
<span class="panel"></span>
<span class="panel"></span>
<span class="panel"></span>
<span class="panel"></span>
<span class="panel"></span>
<img id="mypic" src="https://pic.imgdb.cn/item/62e34e59f54cd3f93774c2c3.gif" alt="" />
</div>
</div>
<script>
let aud = new Audio();
let lastX = 0, canMove = false;
let panelAr = document.querySelectorAll('.panel');
aud.loop = true;
aud.src = 'https://music.163.com/song/media/outer/url?id=35437599.mp3';
wrapper.onclick = () => {
canMove = !canMove;
if(canMove) {
for(ele of panelAr) ele.style.opacity = '0';
wrapper.style.transform = 'rotateX(0) rotateY(0)';
aud.play();
} else {
for(ele of panelAr) ele.style.opacity = '1';
wrapper.style.transform = 'rotateX(-20deg) rotateY(-20deg)';
mypic.style.left = '45%';
mypic.style.top = '40%';
mypic.style.transform = mypic.offsetLeft > 0 ? 'rotateY(0deg)' : 'rotateY(180deg)';
aud.pause();
}
}
document.addEventListener('click', (e) => {
if(canMove == false) return false;
e = event || window.event;
let x = e.pageX, y = e.pageY,
w = document.body.clientWidth, h = document.body.clientHeight,
bw = mypic.offsetWidth, bh = mypic.offsetHeight;
x = x - calcOffset(wrapper).x;
y = y - calcOffset(wrapper).y;
if(x + bw >= w) x = w - bw;
if(y + bh >= h) y = h - bh;
mypic.style.transform = x > lastX ? 'rotateY(180deg)' : 'rotateY(0deg)';
lastX = x;
mypic.style.left = x + 'px';
mypic.style.top = y + 'px';
});
let calcOffset = (ele) => {
let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;
while(pa != null) {
x += pa.offsetLeft;
y += pa.offsetTop;
pa = pa.offsetParent;
}
return {x, y};
}
</script>
@马黑黑 武士厉害{:4_187:} 马黑黑 发表于 2022-7-29 12:08
武士厉害
创新一下，效果还不错 。 加林森 发表于 2022-7-29 12:24
创新一下，效果还不错 。
感觉良好就行{:4_199:} 马黑黑 发表于 2022-7-29 12:52
感觉良好就行
谢谢啦！ 这姿势还挺优美的。 梦油 发表于 2022-7-29 13:51
这姿势还挺优美的。
太极老梦会玩吗？ 盒子里有武功高手。队长的制作真棒{:4_187:} 加林森 发表于 2022-7-29 13:56
太极老梦会玩吗？
不，我不会打太极拳。 红影 发表于 2022-7-29 14:15
盒子里有武功高手。队长的制作真棒
我创新了一下。{:4_189:} 梦油 发表于 2022-7-29 14:17
不，我不会打太极拳。
我会，我打的是陈式太极拳，带武功的。 加林森 发表于 2022-7-29 14:21
我会，我打的是陈式太极拳，带武功的。
厉害，厉害！俺躲你远点吧。{:4_173:} 梦油 发表于 2022-7-29 14:54
厉害，厉害！俺躲你远点吧。
{:4_172:} 加林森 发表于 2022-7-29 15:03
你练多少年啦？ 梦油 发表于 2022-7-29 17:06
你练多少年啦？
八岁开始的。 加林森 发表于 2022-7-29 17:58
八岁开始的。
嚯！那可十分了得啦。 加林森 发表于 2022-7-29 13:19
谢谢啦！
喝茶消暑{:4_190:} 马黑黑 发表于 2022-7-29 18:18
喝茶消暑
谢茶！ 加林森 发表于 2022-7-29 18:33
谢茶！
客气了
页:
[1]
2