马黑黑 发表于 2025-12-6 21:59

My Promise To You

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/promise.jpg') no-repeat center/cover; }
</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=1371199329'});
    tz.add('video', '', 'pd-vid', {
      src: 'https://img.tukuppt.com/video_show/2418175/00/02/06/5b500992e3bae.mp4',
      style: 'opacity: 0.15'
    });
    tz.add('div', 'wrapper', 'wrap300 invert', {style: 'clip-path: ellipse(50% 40%);'});
    tz.add('video', '', 'pd-vid', {
      src: 'https://img.tukuppt.com/video_show/2269348/00/01/38/5b41f3554d4e0.mp4'
    }).to('wrapper');
    tz.add('img', '', 'rotate-ani', {
      src: 'https://638183.freep.cn/638183/small/ytji.png',
      alt: '',
      style: 'position: absolute; width: 130px; right: 20px; cursor: pointer'
    }).playmp3().to('wrapper');
    tz.fs().style('bottom: 20px');
</script>

马黑黑 发表于 2025-12-6 21:59

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/promise.jpg') no-repeat center/cover; }
</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=1371199329'});
    tz.add('video', '', 'pd-vid', {
      src: 'https://img.tukuppt.com/video_show/2418175/00/02/06/5b500992e3bae.mp4',
      style: 'opacity: 0.15'
    });
    tz.add('div', 'wrapper', 'wrap300 invert', {style: 'clip-path: ellipse(50% 40%);'});
    tz.add('video', '', 'pd-vid', {
      src: 'https://img.tukuppt.com/video_show/2269348/00/01/38/5b41f3554d4e0.mp4'
    }).to('wrapper');
    tz.add('img', '', 'rotate-ani', {
      src: 'https://638183.freep.cn/638183/small/ytji.png',
      alt: '',
      style: 'position: absolute; width: 130px; right: 20px; cursor: pointer'
    }).playmp3().to('wrapper');
    tz.fs().style('bottom: 20px');
</script>

马黑黑 发表于 2025-12-6 22:01

双视频，一大一小，大的跟帖子容器，小的跟 id="wrapper" 的 div，切成椭圆；小播花朵也置入该 div

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

马黑黑 发表于 2025-12-6 22:01
双视频，一大一小，大的跟帖子容器，小的跟 id="wrapper" 的 div，切成椭圆；小播花朵也置入该 div

真不错，两个视频相得益彰，都是浪漫温柔类的{:4_187:}

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

马黑黑 发表于 2025-12-6 22:01
双视频，一大一小，大的跟帖子容器，小的跟 id="wrapper" 的 div，切成椭圆；小播花朵也置入该 div

小播花朵也置入该id="wrapper" 的 div 漂亮。其实小播也可以不放入的吧。{:4_187:}

马黑黑 发表于 2025-12-6 22:38

红影 发表于 2025-12-6 22:38
小播花朵也置入该id="wrapper" 的 div 漂亮。其实小播也可以不放入的吧。

可以

马黑黑 发表于 2025-12-6 22:39

红影 发表于 2025-12-6 22:34
真不错，两个视频相得益彰，都是浪漫温柔类的

还好吧

霜染枫丹 发表于 2025-12-6 22:50

这个漂亮，主画面人物暗处理映衬出小视频的主题意境，匠心独运。佩服！！{:4_190:}{:4_204:}

马黑黑 发表于 2025-12-6 22:57

霜染枫丹 发表于 2025-12-6 22:50
这个漂亮，主画面人物暗处理映衬出小视频的主题意境，匠心独运。佩服！！

{:4_180:}

杨帆 发表于 2025-12-6 23:07

漂亮~谢谢马老师精彩分享{:4_190:}

马黑黑 发表于 2025-12-6 23:28

杨帆 发表于 2025-12-6 23:07
漂亮~谢谢马老师精彩分享

{:4_191:}

樵歌 发表于 2025-12-7 07:08

这个有好几层的样纸，画中套画再套动画，巧妙。

马黑黑 发表于 2025-12-7 09:31

樵歌 发表于 2025-12-7 07:08
这个有好几层的样纸，画中套画再套动画，巧妙。

这也看得出来

樵歌 发表于 2025-12-8 07:33

马黑黑 发表于 2025-12-7 09:31
这也看得出来

能的，还有透视功能{:4_170:}

马黑黑 发表于 2025-12-8 08:10

樵歌 发表于 2025-12-8 07:33
能的，还有透视功能

厉害了我的哥

樵歌 发表于 2025-12-8 12:28

马黑黑 发表于 2025-12-8 08:10
厉害了我的哥

不能多用，消耗灵气太多。{:4_189:}

马黑黑 发表于 2025-12-8 13:25

樵歌 发表于 2025-12-8 12:28
不能多用，消耗灵气太多。

合适时用用
页: [1]
查看完整版本: My Promise To You