广陵王印象曲 - 《上陵》

马黑黑 · 发表于 2025-11-14 12:44

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-11-14 12:44

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
.pa { --offsetX: 0px; --bg: url('https://638183.freep.cn/638183/t24/w7/glw.webp') no-repeat center/cover; }
.star { position: absolute; width: 4px; height: 4px; background: lightblue; animation: flash 2s infinite alternate var(--state); }
.ball { position: absolute; width: 40px; height: 40px; background: linear-gradient(tan, var(--bg)); border-radius: 50%; animation: hue-rot linear .5s infinite alternate var(--state), rot linear 4s infinite var(--state); cursor: pointer; }
@keyframes flash { to { opacity: 0; transform: rotate(var(--deg)); } }
@keyframes hue-rot { to { filter: hue-rotate(200deg); } }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2687791808' });
Array.from({length: 100}).forEach( (_, key) => {
const x = tz.ranPos(pa.offsetWidth);
const y = tz.ranPos(pa.offsetHeight / 3);
tz.add('div', '', 'star', { style: `
left: ${100 * x / pa.offsetWidth}%;
top: ${100 * y / pa.offsetHeight}%;
animation-duration: ${1 + tz.getRanInt(1,0)}s;
animation-delay: ${tz.getRanInt(-2,0)}s;
--deg: ${tz.getRanInt(50, 160)}deg;
`});
});
const points = tz.ringPos(10, {
cx: pa.offsetWidth / 2,
cy: pa.offsetHeight / 3,
r1: pa.offsetWidth / 4,
r2: pa.offsetHeight / 4,
a: -180,
});
points.forEach(point => {
tz.add('div', '', 'ball', {style: `
left: ${100 * point[0] / pa.offsetWidth}%;
top: ${100 * point[1] / pa.offsetHeight}%;
--bg: ${tz.color16()};
`}).playmp3();
});
tz.fs().style('left: 20px; bottom: 20px');
</script>

复制代码

马黑黑 · 发表于 2025-11-14 12:51

帖子做 tzMaker 中级教程四演示之用，粒子的创建均为自定义，但通过 tz.ringPos() 和 tz.ranPos() 两个指令获取粒子的坐标数据，并通过 tz.add() 指令进行实际创建工作。

关于获取圆弧顶点数据、随机点数据，请参阅教程。这里，给粒子定位的实际环节中，即确定粒子的 left 和 top 属性值之时，将所获得的数值转换为百分比数值，以保证帖子容器尺寸发生变化时可以自适应，具体代码分别在 22、23 和 40、41行。