记忆信笺
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/webp/jyxj.webp') no-repeat center/cover; }
#player { position: absolute; width: 40px; height: 60px; cursor: pointer;}
#player::before, #player::after { position: absolute; content: ''; width: 100%; height: 100%; border: 4px solid white; border-radius: 8px; animation: rotting var(--du) linear infinite var(--state); --deg: 360deg; --du: 0.5s; }
#player::after { --deg: -360deg; --du: 0.5s; }
@keyframes rotting { to { transform: rotate(var(--deg)); } }
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2055590387' });
tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2629112/00/08/33/5d1e16fbefc2e.mp4' });
tz.add('div', 'player', '', { style: 'bottom: 60px;' }).playmp3();
tz.bgprog().style('bottom: 30px; color: #fefefe; width: 240px;');
tz.fs().style('left: 20px; top: 20px;')
</script> 帖子代码使用帖子电饭煲生成后略加改动：
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa { --offsetX: 0px; --bg: url('https://638183.freep.cn/638183/small/webp/jyxj.webp') no-repeat center/cover; }
#player { position: absolute; width: 40px; height: 60px; cursor: pointer;}
#player::before, #player::after { position: absolute; content: ''; width: 100%; height: 100%; border: 4px solid white; border-radius: 8px; animation: rotting var(--du) linear infinite var(--state); --deg: 360deg; --du: 0.5s; }
#player::after { --deg: -360deg; --du: 0.5s; }
@keyframes rotting { to { transform: rotate(var(--deg)); } }
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2055590387' });
tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2629112/00/08/33/5d1e16fbefc2e.mp4' });
tz.add('div', 'player', '', { style: 'bottom: 60px;' }).playmp3();
tz.bgprog().style('bottom: 30px; color: #fefefe; width: 240px;');
tz.fs().style('left: 20px; top: 20px;')
</script>
原计划两个伪元素转速不同，所以设计了 --du 变量，在本帖它们使用相同的速度转动，该变量就成为多此一举了，不过还是保留着，以便感兴趣的朋友可以方便地改变转速以查看不同的效果。 感谢马老师的分享！快速转动跳跃的小播和缓缓移动的光影赋予了作品的内涵，很精美，很喜欢；
我们走进了春天里，马老师立春快乐！
马黑黑 发表于 2026-2-4 22:39
原计划两个伪元素转速不同，所以设计了 --du 变量，在本帖它们使用相同的速度转动，该变量就成为多此一举了 ...
保留着挺好的，往往需要的时候就会觉得恰如其分。{:4_204:}{:4_190:}
简洁的代码，丰富的效果，谢谢马老师精彩分享{:4_180:} 杨帆 发表于 2026-2-4 23:08
简洁的代码，丰富的效果，谢谢马老师精彩分享
{:4_191:} 霜染枫丹 发表于 2026-2-4 22:59
保留着挺好的，往往需要的时候就会觉得恰如其分。
{:4_181:} 霜染枫丹 发表于 2026-2-4 22:57
感谢马老师的分享！快速转动跳跃的小播和缓缓移动的光影赋予了作品的内涵，很精美，很喜欢；
我们走进了 ...
{:4_199:} 哈哈，这钟声顿时让我熟悉的上海外滩，我在1978年时曾在外滩的黄浦公园小卖部工作一个月（帮忙吧），每天清晨公交车下来时，伴着这钟声走进公园 马黑黑 发表于 2026-2-4 22:39
原计划两个伪元素转速不同，所以设计了 --du 变量，在本帖它们使用相同的速度转动，该变量就成为多此一举了 ...
少许变化一下，效果就不同了，有趣。
欣赏黑黑好帖{:4_187:} 谢谢黑黑老师精彩分享，老师幽默还有电饭煲啊！{:4_187:} 梦江南 发表于 2026-2-5 10:00
谢谢黑黑老师精彩分享，老师幽默还有电饭煲啊！
厨房标配，不敢不有 红影 发表于 2026-2-5 09:36
少许变化一下，效果就不同了，有趣。
欣赏黑黑好帖
{:4_190:} 上海朝阳 发表于 2026-2-5 08:52
哈哈，这钟声顿时让我熟悉的上海外滩，我在1978年时曾在外滩的黄浦公园小卖部工作一个月（帮忙吧），每天清 ...
珍贵的青春回忆 黑黑这个效果挺漂亮的，几天没有出来了，今天这个还是有特点的{:4_178:} 小辣椒 发表于 2026-2-5 20:59
黑黑这个效果挺漂亮的，几天没有出来了，今天这个还是有特点的
感谢支持 马老师制作的音画《[清音纯乐] 记忆信笺》，以清音纯乐为魂，绘就时光里的温柔诗篇。 马老师的音画《[清音纯乐] 记忆信笺》，像一封缓缓展开的时光手札，将岁月的温度与诗意藏进了每一个细节里。 泛黄的信笺上，手写的字迹带着墨香沉淀，仿佛能窥见落笔时的斟酌与深情；
页:
[1]
2