绿叶清舟 发表于 2024-9-23 20:31

下一个是谁


<style>
#mydiv { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://p.upyun.com/demo/tmp/UesEIWou.webp') center/cover; box-shadow: 03px 3px 6px #333; display: grid; place-items: center; position: relative; }
#svg1 { position: absolute; top: 26%; left: 46%; cursor: pointer; filter: hue-rotate(0deg) drop-shadow(0 0 4px black); transition: 1s; mix-blend-mode: saturation; }
#svg1:hover { filter: hue-rotate(200deg) drop-shadow(0 0 4px black); }
</style>

<div id="mydiv">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1905114823" autoplay loop></audio>
      <svg id="svg1" width="200" height="200" viewBox="0 0 200 200" fill="none" stroke="white" stroke-width="4" stroke-dasharray="6 12 6"></svg>
</div>

<script>
var ww = mydiv.offsetWidth;
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({papa: '#mydiv', css: 'bottom: 20px; --fsBg: #eeeeee90; --color: #336699;'});
var observer = new ResizeObserver((elms) => {
      var cr = elms.contentRect;
      svg1.style.transform = `scale(${cr.width / ww * 1.2})`;
});
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), hsvg.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), hsvg.unpauseAnimations());
drawCircles = (num) => {
      let circlecode = '', anicode = '';
      Array(num).fill(0).forEach((c,k) => {
                c = k + 1;
                let bstr = k > 0 ? `ani${k}.begin+${k * 3 / num}s` : '0s';
                let color = `#${Math.random().toString(16).substring(2,8)}a0`;
                circlecode += `<circle id="cc${c}" cx="100" cy="100" r="0" stroke="${color}" transform="rotate(${360 / num * k} 100 100)"></circle>`;
                anicode += `<animate xlink:href="#cc${c}" attributeName="r" values="0;90;0" dur="20s" repeatCount="indefinite" id="ani${c}" begin="${bstr}"></animate>`;
      });
      return circlecode + anicode;
};
svg1.innerHTML = drawCircles(10);
observer.observe(mydiv);
aud.onplaying = aud.onpause = () => aud.paused ? svg1.pauseAnimations() : svg1.unpauseAnimations();
svg1.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

梦油 发表于 2024-9-23 20:42

歌曲和画面都很有趣。{:5_116:}

绿叶清舟 发表于 2024-9-23 21:17

梦油 发表于 2024-9-23 20:42
歌曲和画面都很有趣。

网上看到这个新闻,真不知真正该尴尬的应该是谁,随便一搜还真有这歌

小辣椒 发表于 2024-9-23 21:46

清舟你这个是黑黑那个教程分享?鼠标乱点一通,结果在中间看见有小粒子出来了{:4_173:}

红影 发表于 2024-9-23 22:03

绿叶清舟 发表于 2024-9-23 21:17
网上看到这个新闻,真不知真正该尴尬的应该是谁,随便一搜还真有这歌

看到清舟去搜了一下:

当地时间9月21日,美国总统拜登又一次犯了糊涂。
据《今日印度》和《纽约邮报》报道,在当地时间9月21日举行的美日印澳“四方安全对话”(QUAD)峰会新闻发布会上,拜登忘记了应该介绍哪一位领导人,大喊“下一个是谁”,还称印度是“像我们这样的小国,人口很少”。

红影 发表于 2024-9-23 22:04

而《纽约邮报》指出,印度是世界上人口最多的国家,约有14亿人,而美国是全球第三大人口国家,约有3.33亿人。
《今日印度》称,近年来,拜登经常在公开活动中出现僵住、说话结结巴巴的情况,这让人们担心这位81岁总统的精神状况。
今年7月,拜登在出席北约峰会时,将乌克兰总统泽连斯基称为俄罗斯总统普京。而在美国2024年总统选举候选人首场电视辩论中,拜登也几次出现结巴和支支吾吾的情况。

红影 发表于 2024-9-23 22:05

这个制作有趣,那么多的问号,图片也用了拜登的图片,而且做了处理。
清舟脑筋转得快,就这么件事,就弄出个好玩的帖子{:4_189:}

红影 发表于 2024-9-23 22:06

把新闻和做帖结合起来,这个厉害了{:4_187:}

梦江南 发表于 2024-9-24 08:26

别俱匠心,赞一个!

梦油 发表于 2024-9-24 10:41

绿叶清舟 发表于 2024-9-23 21:17
网上看到这个新闻,真不知真正该尴尬的应该是谁,随便一搜还真有这歌

你还真下功夫了。

冬天的雨 发表于 2024-9-24 19:17

美女好久不见{:4_171:}

冬天的雨 发表于 2024-9-24 19:17

下一个会不会是冬雨{:4_170:}

绿叶清舟 发表于 2024-9-25 20:39

小辣椒 发表于 2024-9-23 21:46
清舟你这个是黑黑那个教程分享?鼠标乱点一通,结果在中间看见有小粒子出来了

这个就是上回用过的一个效果了{:4_189:}

绿叶清舟 发表于 2024-9-25 20:40

冬天的雨 发表于 2024-9-24 19:17
美女好久不见

冬雨晚上好

绿叶清舟 发表于 2024-9-25 20:40

梦油 发表于 2024-9-24 10:41
你还真下功夫了。

觉得这个事太好笑了

绿叶清舟 发表于 2024-9-25 20:40

梦江南 发表于 2024-9-24 08:26
别俱匠心,赞一个!

谢谢江南,晚上好

绿叶清舟 发表于 2024-9-25 20:41

红影 发表于 2024-9-23 22:05
这个制作有趣,那么多的问号,图片也用了拜登的图片,而且做了处理。
清舟脑筋转得快,就这么件事,就弄出 ...

这件事更好玩了

小辣椒 发表于 2024-9-25 20:42

绿叶清舟 发表于 2024-9-25 20:39
这个就是上回用过的一个效果了

清舟我看见你这个全屏欣赏的颜色知道是那个了,这个颜色你没有改过{:4_173:}

绿叶清舟 发表于 2024-9-25 21:03

小辣椒 发表于 2024-9-25 20:42
清舟我看见你这个全屏欣赏的颜色知道是那个了,这个颜色你没有改过

颜色都没有改过了,因为有滤镜在,所以跟着背影颜色变了

小辣椒 发表于 2024-9-25 21:33

绿叶清舟 发表于 2024-9-25 21:03
颜色都没有改过了,因为有滤镜在,所以跟着背影颜色变了

我现在基本就纯套用,不想动脑子哦,感觉累
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: 下一个是谁