七色光

马黑黑

方锦龙·七色光(曲 邓伟标)

一个人演奏七种乐器：

• 越南独弦琴，一根弦，是一种源自越南的民族乐器，它的声音清脆而哀怨，能够表达出人们的思乡之情和对自由的渴望。

• 蒙古马头琴，两根弦，是一种源自蒙古的民族乐器，它的声音浑厚而雄壮，能够表达出人们的豪迈之气和对草原的热爱。

• 日本三味线，三根弦，是一种源自日本的民族乐器，它的声音细腻而优雅，能够表达出人们的精致之美和对和谐的追求。

• 中国阮，四根弦，是一种源自中国的古典乐器，它的声音圆润而悠扬，能够表达出人们的博大之心和对文化的传承。

• 中国五弦琵琶，五根弦，是一种源自中国的古典乐器，它的声音明亮而灵动，能够表达出人们的喜悦之情和对生活的热情。

• 西班牙古典吉他，六根弦，是一种源自西班牙的现代乐器，它的声音温暖而浪漫，能够表达出人们的爱意之火和对艺术的创造。

• 中国古琴，七根弦，是一种源自中国的古典乐器，它的声音幽深而神秘，能够表达出人们的静思之境和对天道的领悟。

——自网易音乐云

马黑黑

帖子代码

1. <style>
   
2.         #mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 700px; background: url('https://638183.freep.cn/638183/t24/2/qsg.jpg') no-repeat center/cover; border: thick inset orange; overflow: hidden; pointer-events: none; z-index: 1; position: relative; }
   
3.         #mydiv::before, #mydiv::after { position: absolute; content: ''; width: 120px; height: 120px; background: inherit; border-radius: 50%; box-shadow: inset 0 0 80px green, 0 0 60px green; pointer-events: auto; cursor: pointer; transition: .75s; animation: rot 8s linear infinite var(--state); }
   
4.         #mydiv::before { left: 20px; top: 20px; }
   
5.         #mydiv::after { right: 5px; top: 5px; animation-delay: -3s; }
   
6.         #mydiv:hover::before, #mydiv:hover::after { box-shadow: inset 0 0 60px green, 0 0 100px green; }
   
7.         #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: overlay; }
   
8.         .pic { position: absolute; offset-path: path('M-100 400 Q512 -80 1124 100'); animation: move 8s linear infinite var(--state); }
   
9.         @keyframes move { to { offset-distance: 100%; } }
   
10.         @keyframes rot { to { transform:  rotate(360deg); } }
    
11. </style>
    
12. 
    
13. <div id="mydiv" title="播放/暂停">
    
14.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2120394182" autoplay loop></audio>
    
15.         <video id="vid" src="https://img.tukuppt.com/video_show/2461796/00/02/11/5b51161ba7413.mp4" muted loop></video>
    
16. </div>
    
17. 
    
18. <script>
    
19. (function() {
    
20.         Array.from({length: 7}).forEach((pic,key) => {
    
21.                 pic = new Image(100,88);
    
22.                 pic.src = 'https://638183.freep.cn/638183/t22/gif/ying1.gif';
    
23.                 pic.className = 'pic';
    
24.                 pic.style.cssText += `left: -100px; top: ${key * 30 + 30}px; animation-delay: -${Math.random() * 2 * key}s; filter: hue-rotate(${360 * Math.random()}deg); z-index: ${key + 2};`;
    
25.                 mydiv.appendChild(pic);
    
26.         });
    
27.         let mState = () => {
    
28.                 mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
    
29.                 aud.paused ? vid.pause() : vid.play();
    
30.         };
    
31.         aud.onplaying = aud.onpause = () => mState();
    
32.         mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
    
33. })();
    
34. </script>

复制代码

帖子主要特点：

元素做相抵路径运动除了使用（以往常用的） animation-delay 值的不同产生水平方向位置错落外，本帖还通过 top 定位属性的变化实现元素沿着同一条 offset-path 路径却不在同一水平线上运动即纵向方向元素也有位置差异。

梦江南

好漂亮的七色光！舒缓的音乐，驻足忘返了！

梦江南

马老师，这帖不出代码吗？

马黑黑

梦江南 发表于 2024-6-3 08:15
马老师，这帖不出代码吗？

在地板楼

马黑黑

梦江南 发表于 2024-6-3 08:14
好漂亮的七色光！舒缓的音乐，驻足忘返了！

梦江南

马黑黑 发表于 2024-6-3 08:16
在地板楼

谢谢老师辛苦！早上好！

樵歌

各种光怪陆离的形态光束在空中尽情穿梭。居然和音乐串连起来一起闹腾。有趣！

樵歌

这下，你的乖徒儿们又得忙一阵儿了

梦油

你的精美制作使我想起了很多年以前中央电视台的一个少儿节目——七色光。

南无月

飞鸟由一只变七只。。路径大方向一 致，位置又各自不同。。。
原来这贴主要学习点就是这个。。

看了地板楼的说明，我得结合代码来理解。。。

南无月

box-shadow: inset 0 0 100px blue, 0 0 30px yellow;
看了半天，小播这里有两种色，往圆内部产生光晕
鼠标碰触会发生变化。。
圆外也有一丢丢。。

马黑黑

南无月 发表于 2024-6-3 12:26
box-shadow: inset 0 0 100px blue, 0 0 30px yellow;
看了半天，小播这里有两种色，往圆内部产生光晕
...

box-shadow 属性中，inset 参数表示内阴影；没有inset，就是外阴影。阴影可以多重，不论内外。

马黑黑

南无月 发表于 2024-6-3 12:17
飞鸟由一只变七只。。路径大方向一 致，位置又各自不同。。。
原来这贴主要学习点就是这个。。

这是重点

马黑黑

梦江南 发表于 2024-6-3 08:14
好漂亮的七色光！舒缓的音乐，驻足忘返了！

这是一个人弹奏的作品。帖子右下角有简介

马黑黑

樵歌 发表于 2024-6-3 09:49
各种光怪陆离的形态光束在空中尽情穿梭。居然和音乐串连起来一起闹腾。有趣！

下午好

马黑黑

梦油 发表于 2024-6-3 10:56
你的精美制作使我想起了很多年以前中央电视台的一个少儿节目——七色光。

啊？撞名了

马黑黑

樵歌 发表于 2024-6-3 09:50
这下，你的乖徒儿们又得忙一阵儿了

这个貌似简单的

梦油

马黑黑 发表于 2024-6-3 12:52
啊？撞名了

这个名字很有些童趣。

南无月

马黑黑 发表于 2024-6-3 12:50
这是重点

晚上细看代码，因为有JS，估计又是半懂不懂