新疆维吾尔族民族乐器弹奏 - Despacito

马黑黑

马黑黑

帖子代码（很简单）：

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 652px); width: 1300px; height: 820px; background: lightblue url('https://638183.freep.cn/638183/t24/jpg/despacito.jpg'); box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; }
   
3. #myplayer { position: absolute; left: calc(50% - 120px); top: 10px; transition: filter 1s; cursor: pointer; animation: rotating 5s infinite linear var(--state); }
   
4. #myplayer:hover { filter: hue-rotate(360deg); }
   
5. #vid { position: absolute; top: -70px; width: 1300px; height: 880px; object-fit: cover; mix-blend-mode: screen; }
   
6. @keyframes rotating { to { transform: rotate(360deg); } }
   
7. </style>
   
8. 
   
9. <div id="papa">
   
10.         <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/02/01/5b4ef06f1969e.mp4" muted loop autoplay></video>
    
11.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=500374416" autoplay loop></audio>
    
12.         <img id="myplayer" src="https://638183.freep.cn/638183/t23/btn/snow.webp" alt="" title="play&pause" />
    
13. </div>
    
14. 
    
15. <script>
    
16. aud.addEventListener('playing', mState, false);
    
17. aud.addEventListener('pause', mState, false);
    
18. myplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
    
19. function mState() {
    
20.         aud.paused
    
21.                 ? (papa.style.setProperty('--state', 'paused'), vid.pause(), myplayer.title = '播放')
    
22.                 : (papa.style.setProperty('--state','running'), vid.play(), myplayer.title = '暂停');
    
23. }
    
24. </script>

复制代码

山人

的确，可以简简单单的

梦油

分享美妙的演奏，谢谢！

山人

mState 函数处理的东东可以增添，用小角逗号隔开：

function mState() {
        aud.paused
                ? (papa.style.setProperty('--state', 'paused'), vid.pause(), myplayer.title = '播放'/*, '...'*/)
                : (papa.style.setProperty('--state','running'), vid.play(), myplayer.title = '暂停'/*, '...'*/);
}

亦是金

一款代码量少，不简单的播放器！赞！欣赏学习了！

红影

代码简单，一样可以做出漂亮的效果，这个好美。尤其鼠标接触会变色，更觉得漂亮

红影

这个播放器按钮漂亮，变色就更漂亮，充满神秘感

马黑黑

红影 发表于 2024-1-6 21:17
这个播放器按钮漂亮，变色就更漂亮，充满神秘感

新疆是很神秘的

马黑黑

梦油 发表于 2024-1-6 20:47
分享美妙的演奏，谢谢！

晚上好

马黑黑

红影 发表于 2024-1-6 21:15
代码简单，一样可以做出漂亮的效果，这个好美。尤其鼠标接触会变色，更觉得漂亮

小辣椒

黑黑厉害，居然一下子用了这么多丘比特箭

马黑黑

醉美水芙蓉 发表于 2024-1-6 20:53
欣赏老师简单漂亮的播放器！

晚上好

马黑黑

亦是金 发表于 2024-1-6 21:02
一款代码量少，不简单的播放器！赞！欣赏学习了！

小辣椒

这个是不是边框有变色效果的？

马黑黑

小辣椒 发表于 2024-1-6 21:27
这个是不是边框有变色效果的？

边框没有

小辣椒

山人 发表于 2024-1-6 20:49
mState 函数处理的东东可以增添，用小角逗号隔开：

function mState() {

其实要用好这些函数，做帖并不简单的，只是我会偷懒，捡最简单的做

小辣椒

黑黑最近是精彩不断，分享不停的，辛苦了

马黑黑

小辣椒 发表于 2024-1-6 21:30
黑黑最近是精彩不断，分享不停的，辛苦了

这个简单的