和光同尘

马黑黑 发表于 2024-10-12 07:57

马黑黑 发表于 2024-10-12 07:58

<h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#tz { margin: 20px auto; width: 600px; height: 900px; border: 1px solid gray; background: url('https://638183.freep.cn/638183/t24/4/hgti.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; border-radius: 8px; z-index: 1; position: relative; }
#player, #ssvg { position: absolute; }
#player { width: 200px; height: 200px; left: calc(50% - 100px); top: 20px; cursor: pointer; animation: rot 8s infinite linear var(--state); }
.down { animation: down var(--dur) var(--delay) linear infinite var(--state), flash 1s var(--delay) infinite alternate linear var(--state); }
@keyframes down { to { transform: rotate(-10deg) translate(0, 1000px); } }
@keyframes flash { to { opacity: 0; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35729475" autoplay loop></audio>
<svg id="ssvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<symbol id="cc" width="10" height="10" viewBox="0 0 10 10">
<circle cx="5" cy="5" r="5"></circlie>
</symbol>
<defs>
<g><animate attributeName="y" to="400" dur="10s" repeatCount="indefinite"></animate></g>
</defs>
</svg>
<img id="player" alt="" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" />
</div>

<script>
mkBalls = (num) => {
var ww = ssvg.clientWidth,
str = '',
colors = ['orange', 'tan', 'yellow', 'gold', 'red', 'plum', 'pink', 'purple'];
Array(num).fill(0).forEach((a,b) => {
var x = Math.round(Math.random() * (ww - 20)),
size = Math.floor(Math.random() * 6) + 6,
fill = colors,
dur = Math.floor(10 * Math.random() + 10),
delay = -1 * Math.round(Math.random() * 15);
str += `<use x="${x}" y="-20" width="${size}" height="${size}" fill="${fill}" href="#cc" class="down" style="--dur:${dur}s;--delay:${delay}s"/>`;
});
return str;
};

ssvg.innerHTML += mkBalls(50);

mState = () => {
player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
ssvg.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

茉莉发表于 2024-10-12 08:10

欣赏问好老师，周六愉快

醉美水芙蓉 发表于 2024-10-12 11:43

醉美水芙蓉 发表于 2024-10-12 11:44

马黑黑 发表于 2024-10-12 12:00

醉美水芙蓉发表于 2024-10-12 11:44
这个播放器简洁漂亮！

{:4_190:}

红影发表于 2024-10-12 12:02

这些小点点的svg制作真漂亮，下落着还明暗变化着，和小播的顶角小球球相呼应，像是被小播甩出来的小点点似的{:4_173:}{:4_199:}

红影发表于 2024-10-12 12:04

还能用选定的颜色去装饰小球，这样好，省得随机色出现自己不想要的颜色{:4_187:}

红影发表于 2024-10-12 12:06

使用竖向图图也不错，可以少用点小点点了，同样可以达到想要的疏密程度。
音乐也好听，欣赏黑黑好帖{:4_199:}

小辣椒 发表于 2024-10-12 13:32

看了一下代码，黑黑这个效果很美，粒子的svg运用，给直接套用的朋友们发福利了{:4_170:}

小辣椒 发表于 2024-10-12 13:33

黑黑这个图用的也是好，审美观不错{:4_199:}

朵拉发表于 2024-10-12 18:55

漂亮，学习一下{:4_190:}

花飞飞 发表于 2024-10-13 16:22

这个灰尘真漂亮，都是彩色的。。。{:4_170:}

马黑黑 发表于 2024-10-13 17:00

花飞飞发表于 2024-10-13 16:22
这个灰尘真漂亮，都是彩色的。。。

而且较大{:4_189:}

花飞飞 发表于 2024-10-13 17:06

马黑黑发表于 2024-10-13 17:00
而且较大

大的好，省得看不见。。。白老师骨子里的浪漫主义，这个世界的灰尘都是彩色的。。

马黑黑 发表于 2024-10-13 17:09

花飞飞发表于 2024-10-13 17:06
大的好，省得看不见。。。白老师骨子里的浪漫主义，这个世界的灰尘都是彩色的。。

这是黑光照耀的结果

花飞飞 发表于 2024-10-13 17:21

马黑黑发表于 2024-10-13 17:09
这是黑光照耀的结果
黑光就是宇宙之光。。{:4_170:}谁也比不上的顶级

马黑黑 发表于 2024-10-13 17:21

花飞飞发表于 2024-10-13 17:21
黑光就是宇宙之光。。谁也比不上的顶级

这存在高端

花飞飞 发表于 2024-10-13 17:36

马黑黑发表于 2024-10-13 17:21
这存在高端

嗯。黑光照耀下的所有东西都大气上档次

马黑黑 发表于 2024-10-13 19:30

花飞飞发表于 2024-10-13 17:36
嗯。黑光照耀下的所有东西都大气上档次

没错

页: [1] 2

花潮论坛's Archiver

和光同尘