【黑师代码】守望TO:小辣椒（学习黑师《青色》小播鼠标跟随效果）
本帖最后由 南无月 于 2024-4-14 19:07 编辑 <br /><br /><style>#papa {
margin: 130px 0 0 calc(50% - 931px);
width: 1700px;
height: 900px;
background: cyan url('https://pic.imgdb.cn/item/65f31a7f9f345e8d037abd04.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
z-index: 1;
position: relative;
}
#btnplay {
position: absolute;
left: 0px;
top: 0px;
width: 160px;
height: 160px;
border: 2px dotted LightCoral;
border-radius: 50%;
cursor: pointer;
box-shadow: inset 0 0 20px #FF4500;
transition: 6s;
animation: rot 8s linear infinite var(--state);
}
#papa:fullscreen #btnplay { width: 280px; height: 280px; }
#papa video {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
opacity: .6;
mix-blend-mode: darken;
pointer-events: none;
}
#papa > video {
border-radius: 0 50% 0 0;
mix-blend-mode: screen;
filter: opacity(.65);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=291343" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/15653652/01/12/35/6193af432daf8.mp4" loop muted></video>
<div id="btnplay">
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/39/00/63258fe5ccf6a.mp4" loop muted></video>
</div>
</div>
<script>
(function() {
let 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: '#papa', css: '--bg: transparent; --color: cyan; bottom: 10px; left: 48%;' });
let playVideo = (flag) => { let vids = document.querySelectorAll('#papa video'); vids.forEach(vid => { flag ? vid.play() : vid.pause(); }); };
let mState = () => aud.paused ?
(papa.style.setProperty('--state', 'paused'), btnplay.title = '点击播放', vid.pause(), playVideo(false)) :
(papa.style.setProperty('--state', 'running'), btnplay.title = '点击暂停', vid.play(), playVideo(true));
let correctPos = (pa,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 > pa.clientWidth) left = pa.clientWidth - son.clientWidth;
if(top + son.clientHeight > pa.clientHeight) top = pa.clientHeight - son.clientHeight;
son.style.left = left + 'px';
son.style.top = top + 'px';
};
aud.onplaying = aud.onpause = () => mState();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
let movTimer = null, sonSize = btnplay.clientWidth;
let rect = papa.getBoundingClientRect();
let margin = {left: parseInt(window.getComputedStyle(papa).marginLeft)};
document.onmousemove = function(e) {
clearTimeout(movTimer);
let x, y;
movTimer = setTimeout(function() {
if(e.target.id === 'papa') {
x = e.offsetX || e.layer.x;
y = e.offsetY || e.layer.y;
}else{
let rect = papa.getBoundingClientRect();
x = e.pageX - rect.x;
y = e.pageY - rect.y;
}
btnplay.style.cssText += `left: ${x}px; top: ${y}px;`;
correctPos(papa, btnplay);
}, 400);
};
})();
document.onclick = (e) => console.log(e.offsetX);
</script>
<br><br><br><br><br><br>
@小辣椒 {:4_170:}看下消息哈~~周末快乐 @马黑黑 谢谢老师哈，当时改这个贴子的时候费了不少功夫{:4_187:} 这小播效果很灵动，太美了。月儿兰心蕙质，很赞{:4_199:} 小播的边缘还有虚线点缀呢。漂亮。
小辣椒亲爱的收礼开心{:4_187:} 南无月 发表于 2024-4-14 18:35
@马黑黑 谢谢老师哈，当时改这个贴子的时候费了不少功夫
这叫好事多磨 来欣赏老师的大作{:4_204:} 特效和画面融合的非常好，赞{:4_187:}{:4_199:} 这个制作漂亮，播放器颜色也很配了 红影 发表于 2024-4-14 19:20
这小播效果很灵动，太美了。月儿兰心蕙质，很赞
这是色彩那批贴子里的青色小播换了个视频。。{:4_187:} 红影 发表于 2024-4-14 19:21
小播的边缘还有虚线点缀呢。漂亮。
小辣椒亲爱的收礼开心
小播边缘虚线是原有的。。{:4_187:} 马黑黑 发表于 2024-4-14 19:47
这叫好事多磨
{:4_173:}磨到老师把代码重写一遍。。音乐大赞，真的好听。。 执著 发表于 2024-4-14 20:24
来欣赏老师的大作
感谢执著临贴支持。。 小九 发表于 2024-4-14 21:32
特效和画面融合的非常好，赞
小九肯定比什么都高兴。。乐一个{:4_187:} 绿叶清舟 发表于 2024-4-14 21:35
这个制作漂亮，播放器颜色也很配了
小播里的视频也找了好久{:4_170:} 南无月 发表于 2024-4-14 21:41
磨到老师把代码重写一遍。。音乐大赞，真的好听。。
不错的 南无月 发表于 2024-4-14 21:39
这是色彩那批贴子里的青色小播换了个视频。。
这个换得好，非常漂亮呢{:4_187:} 南无月 发表于 2024-4-14 21:40
小播边缘虚线是原有的。。
前面没注意，在月儿的帖子里看觉得很特别{:4_173:} 红影 发表于 2024-4-14 21:53
这个换得好，非常漂亮呢
{:4_187:}也是一样找半天才觉得这个合适 红影 发表于 2024-4-14 21:54
前面没注意，在月儿的帖子里看觉得很特别
可能是我把它放大的缘故。