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
黑黑又带来了小播制作的新思路，很赞

简单玩也能玩出花样

杨帆

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

霜染枫丹

我事先码代码存下来，一下子看不懂，小花好看

清茶煮雪

喜欢马老师的代码音画，马老师创作辛苦了。我最怕代码了

红影

马黑黑 发表于 2025-11-30 12:51
.petal 加上伪元素后从占位层面看是一个整体，有50%的高度在小播容器外围，所以 .petal 要向上拉50%。

...

无论是旋转中心还是图片的位置，都是针对元素而言的，所以，因为考虑伪元素的底部衔接而做的设置，克服这个，需要提 50% 。

红影

马黑黑 发表于 2025-11-30 12:52
设计思路其实非常简单

就那两个top需要想想，其他的还是能理解的。做出来的感觉简单，凭空想的时候可不简单呢

红影

马黑黑 发表于 2025-11-30 12:52
简单玩也能玩出花样

代码倒是真的简洁，这玩法还是挺新的啊，不简单呢

马黑黑

红影 发表于 2025-11-30 20:16
代码倒是真的简洁，这玩法还是挺新的啊，不简单呢

应该是简单的吧？就是那个 .petal CSS选择器的设置你一下子理解不到位

马黑黑

红影 发表于 2025-11-30 20:15
就那两个top需要想想，其他的还是能理解的。做出来的感觉简单，凭空想的时候可不简单呢

几何思维能力因人而异，有的人要比划比划，有的人可以凭空思考

马黑黑

红影 发表于 2025-11-30 20:13
无论是旋转中心还是图片的位置，都是针对元素而言的，所以，因为考虑伪元素的底部衔接而做的设置，克服这 ...

你可以把图案想象成一把加长的尺子：在原有基础上从脚底下延伸一倍的长度。这样就好理解了

马黑黑

清茶煮雪 发表于 2025-11-30 19:57
喜欢马老师的代码音画，马老师创作辛苦了。我最怕代码了

代码和代数是一个道理，都是xyz的活儿

马黑黑

霜染枫丹 发表于 2025-11-30 16:26
我事先码代码存下来，一下子看不懂，小花好看