奶奶的话 - 卓鸣（学习黑黑童年印象播放器效果）
<style>#papa {
left: -445px;
top: 130px;
width: 1497px;
height: 716px;
background: gray url('https://pic.imgdb.cn/item/63e24c914757feff339a1b5c.gif') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#mplayer {
--state: paused;
position: absolute;
width: 80px;
height: 80px;
left: 69%;
top: 9%;
border-radius: 50%;
background: Lavender;
box-shadow: inset 0 0 60px hsla(150,50%,0%,.5);
transform: rotate(45deg);
cursor: pointer;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
border: 4px solid green;
clip-path: inset(90% 0% 0% 0%);
animation: clip 8s infinite linear;
animation-play-state: var(--state);
}
#mplayer::after {
animation-delay: -4s;
}
@keyframes clip {
25% { clip-path: inset(0% 0% 0% 90%); border-color: green; }
50% { clip-path: inset(0% 0% 90% 0%); border-color: lightgreen; }
75% { clip-path: inset(0% 90% 0% 0%); border-color: pink; }
100% { clip-path: inset(90% 0% 0% 0%); border-color: darkgreen; }
}
</style>
<div id="papa">
<div id="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=526078737.mp3" autoplay loop></audio>
</div>
<script>
(function() {
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
mplayer.addEventListener('click', () => {
aud.paused ? aud.play() : aud.pause();
});
FS({
pa: papa,
set: 'color: snow; background:Teal; border: 2px solid snow; left: 50%; bottom: 100px;',
});
})();
</script>
<br><br><br><br><br> @马黑黑
黑黑，这个月亮我捣鼓蛮久，白的渐变我弄不好，自己做了月亮在图图上，加了外面的，不全屏欣赏效果好的，全屏欣赏，这个就不合拍了，图图的月亮大了，最后我只得去了，就现在这样绿月亮了{:4_170:} 豪华庭院 美美哒 小辣椒好棒，学习帖做得神速啊{:4_187:} 马黑黑 发表于 2023-2-7 21:25
豪华庭院
土豪家里{:4_170:} 马黑黑 发表于 2023-2-7 21:25
美美哒
月亮渐变还是没有做好 小辣椒 发表于 2023-2-7 21:25
@马黑黑
黑黑，这个月亮我捣鼓蛮久，白的渐变我弄不好，自己做了月亮在图图上，加了外面的，不全屏欣赏 ...
金色银色的月亮都挺好。给一个背景色，把阴影的透明度设置大一些或者不要透明度，就可以弄了。 千羽 发表于 2023-2-7 21:26
小辣椒好棒，学习帖做得神速啊
千羽晚上好，今天这个我是直接套用黑黑代码的，所以速度快 小辣椒 发表于 2023-2-7 21:26
月亮渐变还是没有做好
这个呢，它是有一个内阴影，稍后你可以试试内阴影的透明度 灯火通明的大院。小辣椒添加了诸多的元素，更显温馨和谐了{:4_181:} 小辣椒 发表于 2023-2-7 21:26
土豪家里
非常厉害 马黑黑 发表于 2023-2-7 21:27
金色银色的月亮都挺好。给一个背景色，把阴影的透明度设置大一些或者不要透明度，就可以弄了。
我换白的颜色就是换不好 马黑黑 发表于 2023-2-7 21:29
这个呢，它是有一个内阴影，稍后你可以试试内阴影的透明度
好的，我先交作业，后面再捣鼓 千羽 发表于 2023-2-7 21:29
灯火通明的大院。小辣椒添加了诸多的元素，更显温馨和谐了
千羽，土豪家里的庭院{:4_170:} 播放器也是改进了，做得挺好的，好羡慕啊，欣赏学习了{:4_185:} 马黑黑 发表于 2023-2-7 21:29
非常厉害
和黑黑家里差不多吧 小辣椒 发表于 2023-2-7 21:32
和黑黑家里差不多吧
好多了 小辣椒 发表于 2023-2-7 21:31
千羽，土豪家里的庭院
嗯，看着好温馨啊{:4_173:} 小辣椒 发表于 2023-2-7 21:28
千羽晚上好，今天这个我是直接套用黑黑代码的，所以速度快
感慨的是你还另外加了很多的元素，摆放的位置都自然和谐，好棒啊{:4_181:}