Last Reunion

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
   
3.         .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/cilaos.webp') no-repeat center/cover; }
   
4.         .petal { width: 100%; height: 100%; top: -50%; background: url('https://638183.freep.cn/638183/small/flower.gif') no-repeat center/contain; transform-origin: 50% 100%; }
   
5.         .petal::after { content: ''; position: absolute; width: 100%; height: 100%; top: 100%; background: inherit; transform: scale(1, -1); }
   
6. </style>
   
7. 
   
8. <div id="pa" class="pa"></div>
   
9. 
   
10. <script type="module">
    
11.         import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
    
12.         const tz = TZ.TZ('pa');
    
13.         tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=402073046'});
    
14.         tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2629112/00/01/93/5b4e8b08c6531.mp4'});
    
15.         tz.add('div', 'player', 'wrap100 rot-ani', {style: 'bottom: 100px; cursor: pointer'}).playmp3();
    
16.         tz.lzRot(3, 'player', {tag: 'div', className: 'petal', angle: 180});
    
17.         tz.bgprog().style('bottom: 30px; color: lemonchiffon');
    
18.         tz.fs().style('right: 20px; bottom: 20px');
    
19. </script>

复制代码

马黑黑

小播构图方式：

       使用指令 tz.lzRot() 做3个旋转元素，元素类名为 petal；.petal选择器带一个伪元素，复刻主元素的背景但做scale调整使之成为 96 衔接姿式。其实，如何设计也还应根据图片的特性而定。

红影

.petal选择器和它的伪元素，构成了正反的两种图图，它们各按180度生成3个旋转元素，就有了这样的6个旋转元素的组合。漂亮

红影

这样翻转里的top: -50%;和伪元素里的top:100%;的设置，我还得使劲去理解一下，还是带着 transform-origin: 50% 100%;的设定的，如果没有这两个top，旋转中心还是挺好理解的，这两个top还是有点费解。

红影

黑黑又带来了小播制作的新思路，很赞

马黑黑

红影 发表于 2025-11-30 09:00
这样翻转里的top: -50%;和伪元素里的top:100%;的设置，我还得使劲去理解一下，还是带着 transform-origin:  ...

.petal 加上伪元素后从占位层面看是一个整体，有50%的高度在小播容器外围，所以 .petal 要向上拉50%。

至于 .petal 的伪元素 top 设为100%，这是为了让 .petal 和其伪元素在 .petal 的底部衔接；.petal 的静态旋转设在 50% 100% 是因为它已经移动过，“元素+伪元素”作为整体的中心点现在是在 50% 100% 这个地方——这个地方是针对元素而言。

马黑黑

红影 发表于 2025-11-30 08:56
.petal选择器和它的伪元素，构成了正反的两种图图，它们各按180度生成3个旋转元素，就有了这样的6个旋转元 ...

设计思路其实非常简单

马黑黑

红影 发表于 2025-11-30 09:00
黑黑又带来了小播制作的新思路，很赞

简单玩也能玩出花样

杨帆

小播构图新颖，谢谢马老师精彩分享