朵拉 发表于 2025-12-21 21:15

问 此 生（学习马黑黑Auto-Save效果）

本帖最后由 朵拉 于 2025-12-21 23:43 编辑 <br /><br /><style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
    .pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/6947ee426e81cf71b1c9918d.jpg') no-repeat center/cover; }
    .player { position: absolute; width: 160px; bottom: 40px; cursor: pointer; animation: rot 8s linear infinite var(--state); }
    @keyframes shake {
      from { transform: rotate(-10deg); }
      to { transform: rotate(10deg); }
    }
</style>

<div id="pa" class="pa"></div>

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
    const tz = TZ.TZ('pa');
   
    const gc = `
    问此生（原版）— 困告羊
制作：朵 拉
观白鹭掠过浅滩
听雨敲打青檐
细语也如箴言
喧嚣尘世太繁
唯有月与我共眠
我曾孤栖崖边
看暮霭漫上山巅
云卷云舒
我渺若沙间点
甜也尝尽苦也尝尽
谁解这尘缘
我问青山我是谁
我问明月梦何追
我问自身情何寄
我问浮生喜或悲
若这人间终归虚幻
那我甘愿成一缕烟
不缠不绊
我赏过繁花似绵
却难辨哪朵最妍
我赏过夕阳如丹
也看它隐入山渊
这人生起伏蜿蜒
谁又能避开愁这一篇
有人询我为何不停前
我默而不言
只是伫立峰巅
看一只蝶悠悠地旋
便晓繁华皆会消散
我问青山我是谁
我问明月梦何追
我问自身情何寄
我问寂寞这是罪
若这天地终将黯黯
我愿此身化轻烟
不惹尘怨
    `;
   
    tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=3328031891'});
    tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2414777/00/02/17/5b51a27b2a2e7.mp4'});
    tz.lrc(tz.lrc2HC(gc), '', 1).style('top: 30px');
    tz.add('img', '', 'player', {src: 'https://638183.freep.cn/638183/small/2025/fl102.png'}).playmp3();
    tz.bgprog().style('bottom: 20px; color: navy');
</script>

朵拉 发表于 2025-12-21 21:16

@马黑黑
老师 晚上好，学生交作业，请指正{:4_190:}

马黑黑 发表于 2025-12-21 21:29

小播图片更合适做旋转动画，这一句：

      .player { position: absolute; width: 160px; bottom: 40px; cursor: pointer; animation: flash 0.5s infinite alternate, shake 1s infinite; }

可以改为：

      .player { position: absolute; width: 160px; bottom: 40px; cursor: pointer; animation: rot 8s linear infinite var(--state); }

红影 发表于 2025-12-21 22:52

漂亮，欣赏朵宝好帖{:4_187:}

朵拉 发表于 2025-12-21 23:45

马黑黑 发表于 2025-12-21 21:29
小播图片更合适做旋转动画，这一句：

      .player { position: absolute; width: 160px; bottom: 40 ...

已替换老师修改的代码，感谢{:4_204:}{:4_190:}

马黑黑 发表于 2025-12-22 07:40

朵拉 发表于 2025-12-21 23:45
已替换老师修改的代码，感谢

{:4_199:}

马黑黑 发表于 2025-12-22 07:42

朵拉 发表于 2025-12-21 23:45
已替换老师修改的代码，感谢

如果你需要顺时针旋转，把 rot 改为 rotate

樵歌 发表于 2025-12-22 07:58

音、画和谐，意境唯美！欣赏 朵儿美贴！{:4_190:}
页: [1]
查看完整版本: 问 此 生（学习马黑黑Auto-Save效果）