马黑黑 发表于 2025-11-12 18:00

醉红颜

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/zhy.webp') no-repeat center/cover; }
    .ma { display: grid; place-items: center; left: 80px; }
    .lz { position: absolute; width: 2px; height: 100%; display: grid; place-items: center; }
    .lz::before, .lz::after { position: absolute; content: ''; top: -40px; width: 40px; height: 40px; background: linear-gradient(red, var(--cc)); border-radius: 50%; animation: flash .2s infinite alternate var(--state); animation-delay: inherit; }
    .lz::after { top: 100%; }
    @keyframes flash { to { filter: hue-rotate(var(--deg)); } }
</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=204092' });
    tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/08/37/5d20843234224.mp4' });
    tz.add('div', 'lzpa', 'ma').playmp3();
    tz.lzRot(6, 'lzpa', { className: 'lz', cc: true, deg: true, angle: 180, delay: -1 });
    tz.fs().style('bottom: 20px');
</script>

马黑黑 发表于 2025-11-12 18:00

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa { --offsetX: 0px; --bg: url('https://638183.freep.cn/638183/t24/w7/zhy.webp') no-repeat center/cover; }
    .ma { display: grid; place-items: center; left: 80px; }
    .lz { position: absolute; width: 2px; height: 100%; display: grid; place-items: center; }
    .lz::before, .lz::after { position: absolute; content: ''; top: -40px; width: 40px; height: 40px; background: linear-gradient(red, var(--cc)); border-radius: 50%; animation: flash .2s infinite alternate var(--state); animation-delay: inherit; }
    .lz::after { top: 100%; }
    @keyframes flash { to { filter: hue-rotate(var(--deg)); } }
</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=204092' });
    tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/08/37/5d20843234224.mp4' });
    tz.add('div', 'lzpa', 'ma').playmp3();
    tz.lzRot(6, 'lzpa', { className: 'lz', cc: true, deg: true, angle: 180, delay: -1 });
    tz.fs().style('bottom: 20px');
</script>

马黑黑 发表于 2025-11-12 18:04

醉，恰到好处时，一切幻化为美好。此中境界，红颜最懂

霜染枫丹 发表于 2025-11-12 18:14

一曲醉红颜，缱绻悠长，特别悦耳。动画精致，赏心悦目，赞佩！！祝制作愉快~~

梦江南 发表于 2025-11-12 19:03

这曲醉红颜比有歌词还醉人.{:4_187:}

马黑黑 发表于 2025-11-12 19:25

梦江南 发表于 2025-11-12 19:03
这曲醉红颜比有歌词还醉人.

{:4_206:}

马黑黑 发表于 2025-11-12 19:27

霜染枫丹 发表于 2025-11-12 18:14
一曲醉红颜，缱绻悠长，特别悦耳。动画精致，赏心悦目，赞佩！！祝制作愉快~~

{:4_191:}

杨帆 发表于 2025-11-12 20:43

漂亮~谢谢马老师经典示范{:4_176:}

红影 发表于 2025-11-12 20:44

这样的小播特别漂亮，每一个小球都在闪烁，那么绚丽的色彩，实在是太美了{:4_199:}

朵拉 发表于 2025-11-12 21:19

效果漂亮，学生已交作业，请老师指正{:4_190:}

马黑黑 发表于 2025-11-12 21:33

朵拉 发表于 2025-11-12 21:19
效果漂亮，学生已交作业，请老师指正

{:4_199:}

马黑黑 发表于 2025-11-12 21:34

杨帆 发表于 2025-11-12 20:43
漂亮~谢谢马老师经典示范

{:4_190:}

马黑黑 发表于 2025-11-12 21:34

红影 发表于 2025-11-12 20:44
这样的小播特别漂亮，每一个小球都在闪烁，那么绚丽的色彩，实在是太美了

谢美

小辣椒 发表于 2025-11-12 21:40

这个代码也是不多，感觉和昨天那个差不多的？我得去做一下才知道，今天不行了，明天晚上回家早就做，否则得后天完成了

小九 发表于 2025-11-12 21:44

进来欣赏听歌！{:4_187:}

马黑黑 发表于 2025-11-12 22:08

小九 发表于 2025-11-12 21:44
进来欣赏听歌！

{:4_190:}

马黑黑 发表于 2025-11-12 22:09

小辣椒 发表于 2025-11-12 21:40
这个代码也是不多，感觉和昨天那个差不多的？我得去做一下才知道，今天不行了，明天晚上回家早就做，否则得 ...

这个简单的

小辣椒 发表于 2025-11-12 22:28

马黑黑 发表于 2025-11-12 22:09
这个简单的

主要还要做个图，套用肯定简单的{:4_189:}

马黑黑 发表于 2025-11-12 22:50

小辣椒 发表于 2025-11-12 22:28
主要还要做个图，套用肯定简单的

尽可能去理解CSS、JS tz指令的意思，不然永远没有进步

红影 发表于 2025-11-12 23:13

马黑黑 发表于 2025-11-12 21:34
谢美

不谢它也一样美{:4_173:}
页: [1] 2
查看完整版本: 醉红颜