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

虹 之 间（学习马黑黑醉红颜效果）

本帖最后由 朵拉 于 2025-11-12 21:16 编辑 <br /><br /><style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/691482b93203f7be00f9555a.jpg') no-repeat center/cover; }
    .ma { display: grid; place-items: center; left: 390px; }
    .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://cccimg.com/view.php/e5727761f1e9e399bd88b52d68368f82.mp3' });
    tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2402760/00/01/84/5b4b21df00163.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 21:17

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

红影 发表于 2025-11-12 21:32

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

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

根据帖子背景图特点，小播居中更合适，.style('...') 去掉即可

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

马黑黑 发表于 2025-11-12 21:33
根据帖子背景图特点，小播居中更合适，.style('...') 去掉即可

好，谢谢黑黑老师的指点{:4_190:}

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

我看不见图{:4_198:}

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

看见图了，朵拉这个图有点大，我刷新了几次看见了{:4_199:}
页: [1]
查看完整版本: 虹 之 间（学习马黑黑醉红颜效果）