论坛 › 音乐沙龙 › 七色光

马黑黑 发表于 2024-6-3 08:09

七色光

本帖最后由 马黑黑 于 2024-6-3 11:12 编辑 <br /><br /><style>
        #mydiv { margin: 30px 0 30px calc(50% - 591px); 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; }
        #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); }
        #mydiv::before { left: 20px; top: 20px; }
        #mydiv::after { right: 5px; top: 5px; animation-delay: -3s; }
        #mydiv:hover::before, #mydiv:hover::after { box-shadow: inset 0 0 60px green, 0 0 100px green; }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: overlay; }
        #txtBox { position: absolute; width: 400px; height: 200px; right: 10px; bottom: 20px; color: cyan; font-size: 1em; overflow: auto; pointer-events: auto; padding: 10px; opacity: 0; transition: 1s; }
        #txtBox:hover { opacity: 1; }
        .pic { position: absolute; offset-path: path('M-100 400 Q512 -80 1124 100'); animation: move 8s linear infinite var(--state); }
        .tRight { text-align: right; }
        @keyframes move { to { offset-distance: 100%; } }
        @keyframes rot { to { transform:rotate(360deg); } }
</style>

<div id="mydiv" title="播放/暂停">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2120394182" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2461796/00/02/11/5b51161ba7413.mp4" muted loop></video>
        <div id="txtBox" title="">
                <h3>方锦龙·七色光(曲 邓伟标)</h3>
                <p>一个人演奏七种乐器：</p>
                <p>• 越南独弦琴，一根弦，是一种源自越南的民族乐器，它的声音清脆而哀怨，能够表达出人们的思乡之情和对自由的渴望。</p>
                <p>• 蒙古马头琴，两根弦，是一种源自蒙古的民族乐器，它的声音浑厚而雄壮，能够表达出人们的豪迈之气和对草原的热爱。</p>
                <p>• 日本三味线，三根弦，是一种源自日本的民族乐器，它的声音细腻而优雅，能够表达出人们的精致之美和对和谐的追求。</p>
                <p>• 中国阮，四根弦，是一种源自中国的古典乐器，它的声音圆润而悠扬，能够表达出人们的博大之心和对文化的传承。</p>
                <p>• 中国五弦琵琶，五根弦，是一种源自中国的古典乐器，它的声音明亮而灵动，能够表达出人们的喜悦之情和对生活的热情。</p>
                <p>• 西班牙古典吉他，六根弦，是一种源自西班牙的现代乐器，它的声音温暖而浪漫，能够表达出人们的爱意之火和对艺术的创造。</p>
                <p>• 中国古琴，七根弦，是一种源自中国的古典乐器，它的声音幽深而神秘，能够表达出人们的静思之境和对天道的领悟。</p>
                <p class="tRight">——自网易音乐云</p>
        </div>
</div>

<script>
(function() {
        Array.from({length: 7}).forEach((pic,key) => {
                pic = new Image(100,88);
                pic.src = 'https://638183.freep.cn/638183/t22/gif/ying1.gif';
                pic.className = 'pic';
                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};`;
                mydiv.appendChild(pic);
        });
        let mState = () => {
                mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
                aud.paused ? vid.pause() : vid.play();
        };
        aud.onplaying = aud.onpause = () => mState();
        mydiv.onclick = (e) =>         {
                if(e.target.id === 'mydiv') aud.paused ? aud.play() : aud.pause();
        };
})();
</script>

马黑黑 发表于 2024-6-3 08:15

本帖最后由 马黑黑 于 2024-6-3 09:50 编辑

帖子代码
<style>
      #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; }
      #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); }
      #mydiv::before { left: 20px; top: 20px; }
      #mydiv::after { right: 5px; top: 5px; animation-delay: -3s; }
      #mydiv:hover::before, #mydiv:hover::after { box-shadow: inset 0 0 60px green, 0 0 100px green; }
      #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: overlay; }
      .pic { position: absolute; offset-path: path('M-100 400 Q512 -80 1124 100'); animation: move 8s linear infinite var(--state); }
      @keyframes move { to { offset-distance: 100%; } }
      @keyframes rot { to { transform:rotate(360deg); } }
</style>

<div id="mydiv" title="播放/暂停">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2120394182" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/2461796/00/02/11/5b51161ba7413.mp4" muted loop></video>
</div>

<script>
(function() {
      Array.from({length: 7}).forEach((pic,key) => {
                pic = new Image(100,88);
                pic.src = 'https://638183.freep.cn/638183/t22/gif/ying1.gif';
                pic.className = 'pic';
                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};`;
                mydiv.appendChild(pic);
      });
      let mState = () => {
                mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
                aud.paused ? vid.pause() : vid.play();
      };
      aud.onplaying = aud.onpause = () => mState();
      mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>帖子主要特点：

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

梦江南 发表于 2024-6-3 08:14

好漂亮的七色光！舒缓的音乐，驻足忘返了！{:4_187:}

梦江南 发表于 2024-6-3 08:15

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

马黑黑 发表于 2024-6-3 08:16

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

在地板楼

马黑黑 发表于 2024-6-3 08:16

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

{:4_190:}

梦江南 发表于 2024-6-3 08:17

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

谢谢老师辛苦！早上好！

樵歌 发表于 2024-6-3 09:49

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

樵歌 发表于 2024-6-3 09:50

这下，你的乖徒儿们又得忙一阵儿了{:4_189:}

梦油 发表于 2024-6-3 10:56

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

南无月 发表于 2024-6-3 12:17

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

看了地板楼的说明，我得结合代码来理解。。。{:4_199:}

南无月 发表于 2024-6-3 12:26

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

马黑黑 发表于 2024-6-3 12:49

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

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

马黑黑 发表于 2024-6-3 12:50

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



这是重点

马黑黑 发表于 2024-6-3 12:50

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

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

马黑黑 发表于 2024-6-3 12:51

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

下午好

马黑黑 发表于 2024-6-3 12:52

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

啊？撞名了{:4_170:}

马黑黑 发表于 2024-6-3 12:52

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

这个貌似简单的

梦油 发表于 2024-6-3 16:14

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

这个名字很有些童趣。

南无月 发表于 2024-6-3 18:00

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

晚上细看代码，因为有JS，估计又是半懂不懂{:4_170:}

查看完整版本: 七色光