跟你走

马黑黑 · 发表于 2022-7-17 11:30

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-7-17 12:18 编辑

马黑黑 · 发表于 2022-7-17 11:31

本帖最后由马黑黑于 2022-7-17 12:22 编辑

鼠标点哪儿小鸟去哪儿。顺便把花朵模板也给带出来：

<style>
#papa { margin: auto; width: 740px; height: 560px; background: rgba(0,0,0,.6); box-shadow: 3px 3px 24px #000; position: relative; }
#mama { left: 40%; bottom: 40%; width: 100px; height: 100px; position: absolute; transition: 1s; }
#mama:hover { cursor: pointer; transform: rotate(15deg); }
.piece { position: absolute; background: linear-gradient(rgba(255,0,0,.45), rgba(255,255,255,.35)); width: inherit; height: inherit; border-radius: 0 100%; transform-origin: 100% 100%; }
#bird { position: absolute; width: 73px; height: 83px; transition: left 2s, top 2s; }
</style>
<img id="bird" src="/data/attachment/forum/202207/17/112951jm0vqgv98w8z3h3z.gif" alt="" />
<div id="papa">
<div id="mama"></div>
</div>
<iframe style="display: none" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=5268746&auto=1&height=66"></iframe>
<script>
let lastX = 0;
let pieces = Array.from({length:6}, (_, x) => x * 30 - 30);
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
for(idx in pieces) {
let ele = document.createElement('span');
ele.className = 'piece';
ele.style.transform = 'rotate(' + pieces[idx] + 'deg)';
mama.appendChild(ele);
}
document.addEventListener('click', (e) => {
e = event || window.event;
let x = e.pageX, y = e.pageY,
w = document.body.clientWidth, h = document.body.clientHeight,
bw = bird.offsetWidth, bh = bird.offsetHeight;
if(x + bw >= w) x = w - bw;
if(y + bh >= h) y = h - bh;
bird.style.transform = x > lastX ? 'rotateY(180deg)' : 'rotateY(0deg)';
console.log(x,lastX,x > lastX);
lastX = x;
bird.style.left = x + 'px';
bird.style.top = y + 'px';
});
</script>