跟你走
本帖最后由 马黑黑 于 2022-7-17 12:18 编辑 <br /><br /><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 + '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> 本帖最后由 马黑黑 于 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 + '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>
马黑黑 发表于 2022-7-17 11:31
鼠标点哪儿小鸟去哪儿
弹出式回复的窗口单击无效哈，点的地方必须是页面的地界 好玩好玩 加林森 发表于 2022-7-17 11:40
好玩好玩
{:4_189:} 马黑黑 发表于 2022-7-17 11:43
还不让我回帖了。{:4_189:} 加林森 发表于 2022-7-17 11:49
还不让我回帖了。
可以回的 是的，现在它就跟着的鼠标在跑。 加林森 发表于 2022-7-17 12:15
是的，现在它就跟着的鼠标在跑。
点击才会跟 马黑黑 发表于 2022-7-17 11:32
弹出式回复的窗口单击无效哈，点的地方必须是页面的地界
回复框的地方也能到，在上面的页面里点一下，小鸟就跟出来了，然后翻动屏幕，一路点鼠标，小鸟就跟下来了{:4_173:} 红影 发表于 2022-7-17 12:22
回复框的地方也能到，在上面的页面里点一下，小鸟就跟出来了，然后翻动屏幕，一路点鼠标，小鸟就跟下来了 ...
同一页是可以的，翻页后就没了 好玩，好玩，我回帖，它就在我鼠标边跳{:4_173:} 马黑黑 发表于 2022-7-17 12:20
点击才会跟
是的。啊，你加了背景了。好看！ 这个我喜欢！{:4_178:}太牛❌{:4_178:} 再过来 又来鸟{:4_170:} 怎么老跟着甩不脱了 走吧回家吧，你妈喊你吃虫子了{:4_172:} 小鸟真听话，好像是训练有素，而且它的叫声也很好听。 这小鸟等着放生的啊