我现在就是不由自主，
先找个好看的美人儿。
再找个不搭的背景，因为这背景要换好多次才最终定下。。
PS有很多东东，不一定都有美人才行 马黑黑 发表于 2024-2-28 23:17
蟹蟹
黑黑又开拓出新的效果了呢{:4_199:} 红影 发表于 2024-2-29 21:18
黑黑又开拓出新的效果了呢
没有多新呀 看了老师这篇文章，我恍然大悟：难怪有些明明是静态图片怎么到了帖子里就变成了动画了！谢谢老师了 执著 发表于 2024-2-29 21:28
看了老师这篇文章，我恍然大悟：难怪有些明明是静态图片怎么到了帖子里就变成了动画了！谢谢老师了
慢慢领悟 马黑黑 发表于 2024-2-29 21:19
没有多新呀
以前都单个的图图走路径，这个弄了一群粒子，更漂亮呢{:4_187:} 红影 发表于 2024-2-29 22:09
以前都单个的图图走路径，这个弄了一群粒子，更漂亮呢
还好 先生很尽心的贴子，悉心细致的解说，很欣赏先生过人的才华与为人，为你点个我赞！{:4_191:} 马黑黑 发表于 2024-2-29 22:57
还好
特别漂亮{:4_199:} 马黑黑 发表于 2024-2-29 19:35
PS有很多东东，不一定都有美人才行
习惯用美人养个眼，也不影响什么{:4_173:} 南无月 发表于 2024-3-1 20:03
习惯用美人养个眼，也不影响什么
用蟀哥也行的 马黑黑 发表于 2024-3-1 20:46
用蟀哥也行的
{:4_170:}有啊有啊，只做过一个世首帅的。。
不过蟀的素材一直不是很多。 本帖最后由 马黑黑 于 2024-3-16 09:00 编辑 <br /><br /><style>
#papa { margin: 30px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp1/adiemus.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1000; }
#btnplay { position: absolute; left: 200px; top: 200px; width: 80px; height: 80px; transition: 5s; cursor: pointer; opacity: .9; animation: rot 6s linear infinite; }
#papa:fullscreen #btnplay { width: 120px; height: 120px; }
#btnFs { position: absolute; bottom: 10px; left: 48%; color: white; background: transparent; border: 2px solid white; border-radius: 6px; padding: 4px; transition: opacity 1s; cursor: pointer; opacity: 0; z-index: 10; }
#msg22 { margin: 40px; color: white; padding: 50px; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="msg22">Message Box</div>
<div id="btnFs">进入全屏</div>
<img id="btnplay" src="https://638183.freep.cn/638183/small/purple.png" alt="" title="测试按钮" />
</div>
<script>
let go = {x: true, y: true}, timerId = null, movTimer = null, fs = false;
papa.addEventListener('mousemove', () => {
clearTimeout(timerId);
btnFs.style.opacity = '1';
timerId = setTimeout('btnFs.style.opacity = "0"', 3000);
});
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement !== null) {
fs = true;
btnFs.innerText = '退出全屏';
} else {
fs = false;
btnFs.innerText = '进入全屏';
}
});
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};
}
let correctPos = (son) => {
let left = parseInt(son.style.left), top = parseInt(son.style.top);
if(left < 0) left = 0;
if(top < 0) top = 0;
if(left + son.clientWidth > papa.clientWidth) left = papa.clientWidth - son.clientWidth;
if(top + son.clientHeight > papa.clientHeight) top = papa.clientHeight - son.clientHeight;
son.style.left = left + 'px';
son.style.top = top + 'px';
};
document.onmousemove = function(e) {
if(e.target.id === 'btnplay') return;
clearTimeout(movTimer);
let x, y;
movTimer = setTimeout(function() {
x = document.fullscreenElement ? e.offsetX || e.layer.x : e.pageX - calcOffset(papa).x;
y = document.fullscreenElement ? e.offsetY || e.layer.y : e.pageY - calcOffset(papa).y;
if(document.fullscreenElement && e.target.id === 'btnFs') {
x = e.pageX;
y = e.pageY;
}
let left = go.x === true ? x + 'px': '', top = go.y === true ? y + 'px' : '';
btnplay.style.cssText += `left: ${left}; top: ${top};`;
msg22.innerHTML = `x: ${x} / left: ${left}<br>y: ${y} / top : ${top}<br>papa: ${papa.clientWidth} / ${papa.clientHeight}`;
correctPos(btnplay);
}, 400);
};
btnFs.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();
</script>
页:
1
[2]