致敬女神节·知音

马黑黑 发表于 2024-3-6 08:15

本帖最后由马黑黑于 2024-3-6 09:13 编辑 <style>
#mydiv {
margin: -60px 0 0 calc(50% - 593px);
width: 1024px;
height: 576px;
background: url('https://638183.freep.cn/638183/t24/1/viyb.jpg') no-repeat center/cover;
box-shadow: 3px 3px 8px #000, 0 0 0 2px silver;
overflow: hidden;
z-index: 1;
position: relative;
}
#player {
position: absolute;
left: 10px;
top: 10px;
width: 160px;
height: 160px;
transition: 3s;
filter: invert(1) drop-shadow(0 0 24px yellow);
cursor: pointer;
animation: rot 5s linear infinite var(--state);
}
#player:hover { filter: invert(.8) drop-shadow(0 0 24px red); }
#vid {
position: absolute;
bottom: 0;
width: 100%;
height: calc(100% + 100px);
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145.mp4" loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=131525" autoplay loop></audio>
<img id="player" src="https://638183.freep.cn/638183/web/svg/3star-01.svg" alt="" />
</div>

<script>
(function() {
let timer = null, sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({papa: '#mydiv'});
mydiv.onmousemove = function(e) {
clearTimeout(timer);
timer = setTimeout(function() {
if(e.target.id === 'player') return;
let x = e.offsetX | e.layerX, y = e.offsetY | e.layerY, sw = player.offsetWidth;
if(x < 0) x = 0;
if(x > mydiv.offsetWidth - sw) x = mydiv.offsetWidth - sw;
if(y < 0) y = 0;
if(y > mydiv.offsetHeight - sw) y = mydiv.offsetHeight - sw;
player.style.cssText += `left: ${x}px; top: ${y}px`;
}, 400);
}

let mState = () => aud.paused
? (mydiv.style.setProperty('--state','paused'), vid.pause())
: (mydiv.style.setProperty('--state','running'), vid.play());
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2024-3-6 08:15

本帖最后由马黑黑于 2024-3-6 08:49 编辑 <style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><style></cl-cd>
<cl-cd data-idx="2">#mydiv {</cl-cd>
<cl-cd data-idx="3">    margin: -60px 0 0 calc(50% - 593px);</cl-cd>
<cl-cd data-idx="4">    width: 1024px;</cl-cd>
<cl-cd data-idx="5">    height: 576px;</cl-cd>
<cl-cd data-idx="6">    background: url('https://638183.freep.cn/638183/t24/1/viyb.jpg') no-repeat center/cover;</cl-cd>
<cl-cd data-idx="7">    box-shadow: 3px 3px 8px #000, 0 0 0 2px silver;</cl-cd>
<cl-cd data-idx="8">    overflow: hidden;</cl-cd>
<cl-cd data-idx="9">    z-index: 1;</cl-cd>
<cl-cd data-idx="10">    position: relative;</cl-cd>
<cl-cd data-idx="11">}</cl-cd>
<cl-cd data-idx="12">#player {</cl-cd>
<cl-cd data-idx="13">    position: absolute;</cl-cd>
<cl-cd data-idx="14">    left: 10px;</cl-cd>
<cl-cd data-idx="15">    top: 10px;</cl-cd>
<cl-cd data-idx="16">    width: 160px;</cl-cd>
<cl-cd data-idx="17">    height: 160px;</cl-cd>
<cl-cd data-idx="18">    transition: 3s;</cl-cd>
<cl-cd data-idx="19">    filter: invert(1) drop-shadow(0 0 24px yellow);</cl-cd>
<cl-cd data-idx="20">    cursor: pointer;</cl-cd>
<cl-cd data-idx="21">    animation: rot 5s linear infinite var(--state);</cl-cd>
<cl-cd data-idx="22">}</cl-cd>
<cl-cd data-idx="23">#player:hover { filter: invert(.8) drop-shadow(0 0 24px red); }</cl-cd>
<cl-cd data-idx="24">#vid {</cl-cd>
<cl-cd data-idx="25">    position: absolute;</cl-cd>
<cl-cd data-idx="26">    bottom: 0;</cl-cd>
<cl-cd data-idx="27">    width: 100%;</cl-cd>
<cl-cd data-idx="28">    height: calc(100% + 100px);</cl-cd>
<cl-cd data-idx="29">    object-fit: cover;</cl-cd>
<cl-cd data-idx="30">    pointer-events: none;</cl-cd>
<cl-cd data-idx="31">    mix-blend-mode: screen;</cl-cd>
<cl-cd data-idx="32">}</cl-cd>
<cl-cd data-idx="33">@keyframes rot { to { transform: rotate(360deg); } }</cl-cd>
<cl-cd data-idx="34"></style></cl-cd>
<cl-cd data-idx="35"> </cl-cd>
<cl-cd data-idx="36"><div id="mydiv"></cl-cd>
<cl-cd data-idx="37">    <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145.mp4" loop muted></video></cl-cd>
<cl-cd data-idx="38">    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=131525" autoplay loop></audio></cl-cd>
<cl-cd data-idx="39">    <img id="player" src="https://638183.freep.cn/638183/web/svg/3star-01.svg" alt="" /></cl-cd>
<cl-cd data-idx="40"></div></cl-cd>
<cl-cd data-idx="41"> </cl-cd>
<cl-cd data-idx="42"><script></cl-cd>
<cl-cd data-idx="43">(function() {</cl-cd>
<cl-cd data-idx="44">    let timer = null, sF = document.createElement('script');</cl-cd>
<cl-cd data-idx="45">    sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';</cl-cd>
<cl-cd data-idx="46">    sF.charset = 'utf-8';</cl-cd>
<cl-cd data-idx="47">    document.querySelector('body').appendChild(sF);</cl-cd>
<cl-cd data-idx="48">    sF.onload = () => FS({papa: '#mydiv'});</cl-cd>
<cl-cd data-idx="49">    mydiv.onmousemove = function(e) {</cl-cd>
<cl-cd data-idx="50">        clearTimeout(timer);</cl-cd>
<cl-cd data-idx="51">        timer = setTimeout(function() {</cl-cd>
<cl-cd data-idx="52">            if(e.target.id === 'player') return;</cl-cd>
<cl-cd data-idx="53">            let x = e.offsetX, y = e.offsetY, sw = player.offsetWidth;</cl-cd>
<cl-cd data-idx="54">            if(x < 0) x = 0;</cl-cd>
<cl-cd data-idx="55">            if(x > mydiv.offsetWidth - sw) x = mydiv.offsetWidth - sw;</cl-cd>
<cl-cd data-idx="56">            if(y < 0) y = 0;</cl-cd>
<cl-cd data-idx="57">            if(y > mydiv.offsetHeight - sw) y = mydiv.offsetHeight - sw;</cl-cd>
<cl-cd data-idx="58">            player.style.cssText += `left: ${x}px; top: ${y}px`;</cl-cd>
<cl-cd data-idx="59">        }, 400);</cl-cd>
<cl-cd data-idx="60">    }</cl-cd>
<cl-cd data-idx="61"> </cl-cd>
<cl-cd data-idx="62">    let mState = () => aud.paused</cl-cd>
<cl-cd data-idx="63">        ? (mydiv.style.setProperty('--state','paused'), vid.pause())</cl-cd>
<cl-cd data-idx="64">        : (mydiv.style.setProperty('--state','running'), vid.play());</cl-cd>
<cl-cd data-idx="65">    aud.addEventListener('playing', mState);</cl-cd>
<cl-cd data-idx="66">    aud.addEventListener('pause', mState);</cl-cd>
<cl-cd data-idx="67">    player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="68">})();</cl-cd>
<cl-cd data-idx="69"></script></cl-cd>
</div>

马黑黑 发表于 2024-3-6 08:55

鼠标指针在帖子内悬停 0.4 秒，播放器会屁颠屁颠地跟过去。鼠标指针悬停在播放器之上，什么也不会做。鼠标指针悬停在全屏开关按钮，播放器会有“排斥”行为——这是因为获取到的鼠标指针XY坐标是针对全屏开关按钮的数据（可以解决，但留着这样子也有趣）。

梦油发表于 2024-3-6 09:00

借黑黑先生美帖祝花潮论坛女士们节日快乐！

马黑黑 发表于 2024-3-6 09:12

梦油发表于 2024-3-6 09:00
借黑黑先生美帖祝花潮论坛女士们节日快乐！

{:4_190:}

朵拉发表于 2024-3-6 11:01

仙气飘飘，欣赏学习下{:4_190:}

朵拉发表于 2024-3-6 11:03

播放器还可以滑动，真不错耶{:4_178:}

马黑黑 发表于 2024-3-6 12:32

朵拉发表于 2024-3-6 11:03
播放器还可以滑动，真不错耶

{:4_190:}

马黑黑 发表于 2024-3-6 12:32

朵拉发表于 2024-3-6 11:01
仙气飘飘，欣赏学习下

{:4_191:}

樵歌发表于 2024-3-6 14:10

粉红色的梦想充斥天地间。一切都像是梦境中。

马黑黑 发表于 2024-3-6 17:28

樵歌发表于 2024-3-6 14:10
粉红色的梦想充斥天地间。一切都像是梦境中。

想不想遨游一下下

南无月 发表于 2024-3-6 18:04

看了下，这个还是第一代的鼠标跟随。
没把鼠标贴外跟的那个换上来呀

南无月 发表于 2024-3-6 18:06

非常好看，借老师神贴，祝坛子里的女神们节日快乐。。{:4_187:}

马黑黑 发表于 2024-3-6 18:16

南无月发表于 2024-3-6 18:06
非常好看，借老师神贴，祝坛子里的女神们节日快乐。。

{:4_191:}

红影发表于 2024-3-6 18:38

好美的色彩，这个按钮还能鼠标跟随呢。好漂亮的制作。欣赏黑黑好帖{:4_187:}

红影发表于 2024-3-6 18:39

真美好的祝福帖。借黑黑美帖，同祝论坛的姐妹们节日快乐{:4_199:}

马黑黑 发表于 2024-3-6 18:59

红影发表于 2024-3-6 18:38
好美的色彩，这个按钮还能鼠标跟随呢。好漂亮的制作。欣赏黑黑好帖

喝水{:4_190:}

马黑黑 发表于 2024-3-6 18:59

红影发表于 2024-3-6 18:39
真美好的祝福帖。借黑黑美帖，同祝论坛的姐妹们节日快乐

{:4_204:}

小文发表于 2024-3-6 19:31

祝福花潮女士们节日快乐！也祝愿花潮的接她们多洗耳恭做饭和洗碗。{:4_191:}

马黑黑 发表于 2024-3-6 20:41

小文发表于 2024-3-6 19:31
祝福花潮女士们节日快乐！也祝愿花潮的接她们多洗耳恭做饭和洗碗。

{:4_199:}

页: [1] 2 3 4 5 6 7 8 9 10

花潮论坛's Archiver

致敬女神节·知音