论坛 › 音乐沙龙 › 红歌庆 “ 七一 ” （学习马老师的代码）

冬天的雨 发表于 2023-6-30 00:55

红歌庆 “ 七一 ” （学习马老师的代码）

<style>
#mydiv {
      margin: 0 0 0 calc(50% - 593px);
      width: 1024px;
      height: 700px;
      border: 1px solid tan;
      background: url('https://pic.imgdb.cn/item/649db5ea1ddac507cc122c4b.jpg'),
                url('https://638183.freep.cn/638183/rb2.jpg') no-repeat center/cover,
                url(' ') no-repeat 300px 300px;
      background-blend-mode: screen,screen;
      box-shadow: 0 0 8px #000;
      position: relative;
      --state: paused;
}
.circle {
      width: 120px;
      height: 120px;
      top: 0;
      border-radius: 50%;
      border: 0px solid tan;
      border-color: red tan pink purple;
      box-sizing: border-box;
      background: url('https://pic.imgdb.cn/item/649d1fc71ddac507cc112e0d.png') no-repeat center/cover;
      display: block;
      position: absolute;
      offset-path: path('M30 300 Q512 -200, 994 300');
      cursor: pointer;
      opacity: .95;
      animation: rot 6s var(--delay) infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5234192.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
      let spans = [];
      let setRgb = () => {
                let ar = [];
                for(i = 0; i < 3; i ++) {
                        ar.push(Math.floor(Math.random() * 256));
                }
                return ar.join(',');
      };
      let mkEles = (papa,n) => {
                Array.from({length: n}).forEach( (item,key) => {
                        item = document.createElement('span');
                        item.className = 'circle';
                        item.style.cssText += `
                              border-color: rgb(${setRgb()}) rgb(${setRgb()}) rgb(${setRgb()}) rgb(${setRgb()});
                              offset-distance: ${100 / n * (key + .5)}%;
                              --delay: ${Math.random() * -6}s;
                        `;
                        spans.push(item);
                        papa.appendChild(item);
                });
      };
      mkEles(mydiv,5);
      let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>

冬天的雨 发表于 2023-6-30 00:57

@小辣椒
套用一个马老师的代码 任务完成{:4_170:}

冬天的雨 发表于 2023-6-30 00:58

@马黑黑

马老师冬雨瞎套用了一个{:4_170:}

谢谢马老师源码分享

红影 发表于 2023-6-30 09:06

这些五角星用得真好，很适合党的生日的主题。冬小雨很赞{:4_187:}

红影 发表于 2023-6-30 09:11

借冬小雨好帖，热烈祝贺建党102周年{:4_374:}

梦油 发表于 2023-6-30 09:45

伟大的中国共产党万岁！

冬天的雨朋友早晨好！

梦缘 发表于 2023-6-30 11:01

很精彩，欣赏老师的分享，问好1{:4_180:}

马黑黑 发表于 2023-6-30 12:34

冬天的雨 发表于 2023-6-30 00:58
@马黑黑

马老师冬雨瞎套用了一个


这个好，成功{:4_199:}

岩新新 发表于 2023-6-30 12:41

分享精彩制作！

小辣椒 发表于 2023-6-30 18:12

冬雨也是努力的，套用出来了{:4_199:}

小辣椒 发表于 2023-6-30 18:13

冬天的雨 发表于 2023-6-30 00:57
@小辣椒
套用一个马老师的代码 任务完成

还可以做其他的，继续套用{:4_197:}{:4_185:}

醉美水芙蓉 发表于 2023-6-30 20:52

冬天的雨 发表于 2023-7-1 12:07

红影 发表于 2023-6-30 09:06
这些五角星用得真好，很适合党的生日的主题。冬小雨很赞

美女好，{:4_171:}

冬天的雨 发表于 2023-7-1 12:07

红影 发表于 2023-6-30 09:11
借冬小雨好帖，热烈祝贺建党102周年

今天正日子，刚好休息天

冬天的雨 发表于 2023-7-1 12:08

梦油 发表于 2023-6-30 09:45
伟大的中国共产党万岁！

冬天的雨朋友早晨好！

梦油老师好{:4_187:}

冬天的雨 发表于 2023-7-1 12:08

梦缘 发表于 2023-6-30 11:01
很精彩，欣赏老师的分享，问好1

谢谢梦缘欣赏{:4_187:}

冬天的雨 发表于 2023-7-1 12:09

马黑黑 发表于 2023-6-30 12:34
这个好，成功

马老师好，是你的源码好{:4_170:}

冬天的雨 发表于 2023-7-1 12:09

岩新新 发表于 2023-6-30 12:41
分享精彩制作！

谢谢新新欣赏{:4_187:}

冬天的雨 发表于 2023-7-1 12:10

小辣椒 发表于 2023-6-30 18:12
冬雨也是努力的，套用出来了

不做可以吗？你呼叫的不停{:4_170:}

冬天的雨 发表于 2023-7-1 12:11

小辣椒 发表于 2023-6-30 18:13
还可以做其他的，继续套用

哈哈{:4_197:}{:4_185:}

查看完整版本: 红歌庆 “ 七一 ” （学习马老师的代码）