朵拉 发表于 2025-12-22 21:26

病态的爱（学习马黑黑雾色山脉效果）

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
        .pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/694945edc154427986da0d1e.jpg') no-repeat center/cover; }
        .title-text { font-size: 40px; cursor: pointer; transition: .5s; animation: flash .5s infinite alternate var(--state); }
        .title-text:hover { transform: scale(1.2) rotate(15deg); }
        .pd-vid { opacity: 1; clip-path: polygon(0 0,50% 20%,100% 0,100% 100%, 50% 80%, 0 100%); }
</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');
       
        tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=3314774355'});
        tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2629112/00/02/10/5b51555fb44a9.mp4'});

        tz.add('div', 'player', 'wrap100', {style: 'bottom: 20px'});

        const txtAr = '病态的爱'.split(''); // 帖子标题按字拆分为数组
        // 按标题字数获取外切园上半部各字所在标签的位置
        const pos = tz.ringPos(txtAr.length, {cx: 50, cy: 50, r1: 160, r2: 80, a: 180, startA: -180, offsetX: 20});
        // 输出半圆弧状标题
        pos.forEach((p, k) => {
                tz.add('span', '', 'title-text', {style: `left: ${p}px; top: ${p}px; color: ${tz.colorHSL()}`})
                  .text(txtAr)
                  .to(player)
                  .playmp3();
        });
       
        tz.bgprog().style('width: 120px; bottom: 25px; color: cyan');
       
        tz.fs().style('top: 30px');
</script>

朵拉 发表于 2025-12-22 21:27

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

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

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

马黑黑 发表于 2025-12-22 23:04

很漂亮

梦江南 发表于 2025-12-23 08:27

欣赏朵拉的精美制作，赞！{:4_187:}

偶然~ 发表于 2025-12-23 08:54

人生遇好友，
快乐才永久！
无论在哪里，
诚实去相守！
心中有牵挂，
时常有问候！
祝福送温暖，
健康又长寿！

偶然~ 发表于 2025-12-23 08:54

来欣赏精品佳作！

偶然~ 发表于 2025-12-23 08:55

感谢朵拉带来的精彩，辛苦了！祝你开心幸福、阖家安康！

小辣椒 发表于 2025-12-23 21:33

欣赏朵拉漂亮的制作{:4_171:}
页: [1]
查看完整版本: 病态的爱（学习马黑黑雾色山脉效果）