天外来物

马黑黑

全屏观赏

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         --state: paused; --deg: 1turn;
   
4.         margin: -80px 0 0 calc(50% - 593px);
   
5.         display: grid;
   
6.         place-items: center;
   
7.         width: 1024px;
   
8.         height: 640px;
   
9.         background: lightblue url('https://638183.freep.cn/638183/t23/1/twlw.jpg') no-repeat center/cover;
   
10.         box-shadow: 6px 3px 20px #000;
    
11.         user-select: none;
    
12.         position: relative;
    
13.         z-index: 1;
    
14. }
    
15. #btnFs {
    
16.         position: absolute;
    
17.         bottom: 20px;
    
18.         width: fit-content;
    
19.         height: fit-content;
    
20.         padding: 6px;
    
21.         border-radius: 6px;
    
22.         border: 2px solid lightblue;
    
23.         color: lightblue;
    
24.         text-shadow: 1px 1px 1px #000;
    
25.         display: none;
    
26.         cursor: pointer;
    
27. }
    
28. #mplayer {
    
29.         margin: 200px auto;
    
30.         background: tan;
    
31.         box-shadow: -10px -10px 30px black inset;
    
32.         border-radius: 50%;
    
33.         width: 40px;
    
34.         height: 40px;
    
35.         cursor: pointer;
    
36.         animation: rot linear 3s infinite var(--state);
    
37.         position: relative;
    
38. }
    
39. #mplayer::before, #mplayer::after {
    
40.         position: absolute;
    
41.         content: '';
    
42.         width: 40px;
    
43.         height: 40px;
    
44.         top: 50px;
    
45.         box-shadow:
    
46.                 100px 100px 30px red,
    
47.                 -100px 100px 30px navy,
    
48.                 100px -100px 30px orange,
    
49.                 -100px -100px 30px olive;
    
50.         animation: rot linear 3s infinite var(--state);
    
51. }
    
52. #mplayer::after { --deg: -2turn; top: -50px; }
    
53. @keyframes rot { to { transform: rotate(var(--deg)); } }
    
54. </style>
    
55. 
    
56. <div id="papa">
    
57.         <div id="mplayer"></div>
    
58.         <div id="btnFs">全屏观赏</div>
    
59.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1959116081.mp3" autoplay loop></audio>
    
60. </div>
    
61. 
    
62. <script>
    
63. (function() {
    
64.         let fs = false, timerId;
    
65. 
    
66.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
67.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
68.         aud.addEventListener('play', () => mState());
    
69.         aud.addEventListener('pause', () => mState());
    
70.         aud.addEventListener('ended', () => playNext());
    
71.         papa.addEventListener('mousemove', (e) => {
    
72.                 clearTimeout(timerId);
    
73.                 btnFs.style.display = 'block';
    
74.                 timerId = setTimeout('btnFs.style.display = "none"', 3000);
    
75.         });
    
76.         btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
    
77.         document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
    
78. })();
    
79. </script>

复制代码

焱鑫磊

欣赏老师的作品！赞！！！

马黑黑

简单解释

正中央的小星球是播放器（#mplayer），它带两个伪元素 #mplayer::before 和 #mplayer::after，这两个伪元素各拥有四个阴影。

小星球自身旋转，其伪元素原则上会跟着旋转，但帖子希望的效果是其中的一个伪元素应你想旋转，所以在伪元素中依然加入了 animation 属性。当然，针对本帖不加也行，逆向旋转的实现主要还是通过CSS变量 --deg 来完成，::after 伪元素将该变量赋值为 --deg: -2turn; ，必须是负两圈，否则 -1turn 的话将与主元素的 1turn 相抵消，结果是不转，::before 伪元素则和主元素同步旋转。

两个伪元素还设置了不同的 top 位置值，以产生旋转时阴影交错穿插的效果。

只有小星球接受点击操作，阴影没有设计交互动作。

马黑黑

焱鑫磊 发表于 2023-3-5 09:23
欣赏老师的作品！赞！！！

早啊

梦油

动感十足的画面显得生机勃勃。

马黑黑

梦油 发表于 2023-3-5 10:11
动感十足的画面显得生机勃勃。

有一点点活泼

红影

我的天，前一个还没来得及做，后一个新效果就出来了呢

红影

看到前面一个帖子的4个阴影，这个里面是8个了。前面一个的阴影均匀地分布在四周，原来加入top就可以改变它们的距离了，再加上不逆向转动，就形成了错落有致的效果，这个构思真棒

红影

这个有点像魔术里扔多个球的感觉。制作真漂亮

红影

太过活泼了，看大这个帖子，感觉星星都疯了

梦油

马黑黑 发表于 2023-3-5 10:13
有一点点活泼

是的，整个画面显得生机盎然。

马黑黑

梦油 发表于 2023-3-5 10:46
是的，整个画面显得生机盎然。

看的入眼就好

马黑黑

红影 发表于 2023-3-5 10:38
我的天，前一个还没来得及做，后一个新效果就出来了呢

原理差不多的，就是应用上加入了一些机制

马黑黑

红影 发表于 2023-3-5 10:40
看到前面一个帖子的4个阴影，这个里面是8个了。前面一个的阴影均匀地分布在四周，原来加入top就可以改变它 ...

两个伪元素各有四个阴影，放在一起设计的

马黑黑

红影 发表于 2023-3-5 10:41
这个有点像魔术里扔多个球的感觉。制作真漂亮

还行的

马黑黑

红影 发表于 2023-3-5 10:42
太过活泼了，看大这个帖子，感觉星星都疯了

人没疯就好

梦油

马黑黑 发表于 2023-3-5 10:56
看的入眼就好

你的代码操作水平很了得。

马黑黑

醉美水芙蓉 发表于 2023-3-5 11:19
欣赏老师佳作！

感谢支持