烟雨云台（tzMaker中级教程一演示示例）

马黑黑 · 发表于 2025-11-7 19:42

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

x

马黑黑 · 发表于 2025-11-7 19:43

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/yyyt.jpg') no-repeat center/cover; }
.lz { width: 40px; height: 40px; border-radius: 0 100%; background: linear-gradient(var(--cc), lightgreen); transition: .5s; animation: rot 4s linear infinite var(--state); }
#player:hover .lz { filter: hue-rotate(150deg); rotate: 1 0.5 0.5 180deg; }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v2.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2088974054' });
tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/08/42/5d2216ee86417.mp4' });
tz.bgprog().style('bottom: 20px; color: lightyellow');
tz.fs().style('right: 20px; top: 20px');
tz.add('div', 'player', 'ma').style('bottom: 100px').playmp3();
tz.lzRing(10, 'player', { className: 'lz', cc: true, delay: -4 });
</script>