姑苏

马黑黑

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: -80px 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: lightblue url('https://638183.freep.cn/638183/t23/webp/gusu.webp') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         position: relative;
   
9.         user-select: none;
   
10.         z-index: 1;
    
11.         --state: paused;
    
12. }
    
13. #fly {
    
14.         position: absolute;
    
15.         left: 0;
    
16.         width: 360px;
    
17.         height: 200px;
    
18.         animation: fly 100s infinite alternate var(--state);
    
19. }
    
20. .mplayer {
    
21.         --tt: 6s;
    
22.         position: absolute;
    
23.         left: 0;
    
24.         width: 200px;
    
25.         height: 200px;
    
26.         border-radius: 50%;
    
27.         transform: perspective(1000px) rotateX(45deg) rotateY(30deg);
    
28.         animation: rot var(--tt) infinite var(--state);
    
29.         cursor: pointer;
    
30.         transition: .45s;
    
31. }
    
32. .mplayer:hover { filter: drop-shadow(0 0 80px green) brightness(200%); }
    
33. .mplayer:nth-of-type(2) {
    
34.         --tt: 4s;
    
35.         left: 210px;
    
36.         width: 150px;
    
37.         height: 150px;
    
38. }
    
39. .mplayer:nth-of-type(3) {
    
40.         --tt: 2s;
    
41.         left: 130px;
    
42.         width: 100px;
    
43.         height: 100px;
    
44. }
    
45. @keyframes rot { to { transform: perspective(1000px) rotateX(45deg) rotateY(30deg) rotateZ(360deg); } }
    
46. @keyframes fly { to { left: calc(100% - 360px); } }
    
47. </style>
    
48. 
    
49. <div id="papa">
    
50.         <div id="fly">
    
51.                 <img class="mplayer" src="https://638183.freep.cn/638183/t23/1/7sh-1.png" alt="" />
    
52.                 <img class="mplayer" src="https://638183.freep.cn/638183/t23/1/7sh-1.png" alt="" />
    
53.                 <img class="mplayer" src="https://638183.freep.cn/638183/t23/1/7sh-1.png" alt="" />
    
54.         </div>
    
55. </div>
    
56. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1395615427.mp3" loop autoplay></audio>
    
57. 
    
58. <script>
    
59. (function() {
    
60.         (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);
    
61.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
62.         let btns = document.querySelectorAll('.mplayer');
    
63.         [...btns].forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
    
64.         aud.addEventListener('play', () => mState());
    
65.         aud.addEventListener('pause', () => mState());
    
66.         FS({
    
67.                 pa:papa,
    
68.                 set:'left: 50%; transform: translate(-50%); bottom: 20px; background: transparent; color: snow; border: 2px dotted snow;',
    
69.         });
    
70. })();
    
71. </script>
    

复制代码

马黑黑

机制解释：

音乐控制器由一个父元素 id="fly " 带三个图片（class="mplayer"）组成一个可以移动、转动的有机体，左右移动是父元素的行为，3d转动是图片的行为，音乐的播放/暂停控制通过单击三张图片任意一张实现。

图片忽转忽停的效果是CSS关键帧动画调用者animation的缺省（默认）行为，左右移动其实也是使用默认的，而此前，我们通常会设置为 linear 以便令运动方式是匀速的。

JS对关键帧动画的控制通过 mState 函数完成，父元素和其里面的图片使用不同的 @keyframes 动画，但共享一个CSS变量 --state ，该变量通过帖子父元素 papa 传递。

以下是扩展知识：

需要注意的是，父元素向子元素传递CSS变量可以渗透到子层、孙子层、曾孙层……，这叫继承；但如果要向子孙层的伪元素传递，则只能通过伪元素的直接父层元素来完成，papa对此无能为力。比方说，papa 可以向自己的伪元素传递CSS变量，但不能向它的子元素 id="fly" 的 div 的伪元素传递变量，这需要 fly 自己来完成。

非常开心

                               
登录/注册后可看大图

雨中悄然

这个花播位置会移动

庶民

我欣赏美好的东东，点赞。

红影

这个太好了，我本来因为听不到歌曲而看不到效果，点了一下换一首歌试试，就听到看到了

海笑

欣赏老师佳作！

红影

马黑黑 发表于 2023-2-22 07:58
机制解释：

音乐控制器由一个父元素 id="fly " 带三个图片（class="mplayer"）组成一个可以移动、转动的 ...

yinwei 共享一个CSS变量 --state ,所以点击的时候所有动态都停止了

红影

马黑黑 发表于 2023-2-22 07:58
机制解释：

音乐控制器由一个父元素 id="fly " 带三个图片（class="mplayer"）组成一个可以移动、转动的 ...

mplayer里的transition: 平日里看到的比较少呢，是在默认效果里的过渡么？

马黑黑

红影 发表于 2023-2-22 09:40
mplayer里的transition: 平日里看到的比较少呢，是在默认效果里的过渡么？

鼠标指针移到花花试试看

马黑黑

非常开心 发表于 2023-2-22 08:08

感谢光临指导

马黑黑

雨中悄然 发表于 2023-2-22 08:12
这个花播位置会移动

花飞飞

马黑黑

庶民 发表于 2023-2-22 08:49
我欣赏美好的东东，点赞。

感谢支持