皇上既然看不起，本队就把她咔嚓了。来人，把杨贵妃拖出去宰了。。。
用过刀吗？{:5_117:} 本帖最后由 加林森 于 2022-7-29 11:16 编辑 <br /><br />东篱闲人 发表于 2022-6-3 22:22
用过刀吗？
什么都用过。。。。{:5_158:}
<style>
#papa { left: -214px; 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::before { position: absolute; content: ''; width: 80px; height: 80px; top: 50%; left: 30%; background: linear-gradient(green, red); border-radius: 50% 50% 25% 50%; transform: rotate(45deg); opacity: .65; }
#mypic { position: absolute; width: 73px; height: 83px; left: 45%; top: 40%; transform: translateZ(80px); transition: left 1.5s,top 1.5s; }
#wrapper>span:nth-child(1) { transform: translateZ(100px); background: mediumturquoise; }
#wrapper>span:nth-child(2) { transform: translateZ(-100px); background: lightgreen; }
#wrapper>span:nth-child(3) { transform: translateX(-100px) rotateY(90deg); background: skyblue; }
#wrapper>span:nth-child(4) { transform: translateX(100px) rotateY(90deg); background: cornflowerblue; }
#wrapper>span:nth-child(5) { transform: translateY(-100px) rotateX(90deg); background: royalblue; }
#wrapper>span:nth-child(6) { transform: translateY(100px) rotateX(90deg); background: lightskyblue; }
.panel { position: absolute; width: 200px; height: 200px; text-align: center; transition: all 4s; }
</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/62e350bcf54cd3f937815344.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>
这个是新娘的样纸 马黑黑 发表于 2022-6-4 10:46
这个是新娘的样纸
不是吧 加林森 发表于 2022-6-4 10:57
不是吧
就是要嫁人的样纸 马黑黑 发表于 2022-6-4 11:07
就是要嫁人的样纸
那个年代喜欢这样穿的吧 加林森 发表于 2022-6-4 11:09
那个年代喜欢这样穿的吧
额？知道了 马黑黑 发表于 2022-6-4 11:16
额？知道了
嗯嗯 加林森 发表于 2022-6-4 11:36
嗯嗯
大红衣服人人穿 马黑黑 发表于 2022-6-4 11:37
大红衣服人人穿
是的哦。我们这里的老人都喜欢穿大红的衣服了，真是奇怪了。 加林森 发表于 2022-6-4 11:48
是的哦。我们这里的老人都喜欢穿大红的衣服了，真是奇怪了。
主要是可以防止交通事故 马黑黑 发表于 2022-6-4 12:15
主要是可以防止交通事故
{:5_115:}{:4_170:} 加林森 发表于 2022-6-4 12:17
是吧？红色是亮色，鲜艳而显眼 马黑黑 发表于 2022-6-4 13:04
是吧？红色是亮色，鲜艳而显眼
是的是的。
页:
1
[2]