Last Reunion
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/cilaos.webp') no-repeat center/cover; }
.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%; }
.petal::after { content: ''; position: absolute; width: 100%; height: 100%; top: 100%; background: inherit; transform: scale(1, -1); }
</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://music.163.com/song/media/outer/url?id=402073046'});
tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2629112/00/01/93/5b4e8b08c6531.mp4'});
tz.add('div', 'player', 'wrap100 rot-ani', {style: 'bottom: 100px; cursor: pointer'}).playmp3();
tz.lzRot(3, 'player', {tag: 'div', className: 'petal', angle: 180});
tz.bgprog().style('bottom: 30px; color: lemonchiffon');
tz.fs().style('right: 20px; bottom: 20px');
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/cilaos.webp') no-repeat center/cover; }
.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%; }
.petal::after { content: ''; position: absolute; width: 100%; height: 100%; top: 100%; background: inherit; transform: scale(1, -1); }
</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://music.163.com/song/media/outer/url?id=402073046'});
tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2629112/00/01/93/5b4e8b08c6531.mp4'});
tz.add('div', 'player', 'wrap100 rot-ani', {style: 'bottom: 100px; cursor: pointer'}).playmp3();
tz.lzRot(3, 'player', {tag: 'div', className: 'petal', angle: 180});
tz.bgprog().style('bottom: 30px; color: lemonchiffon');
tz.fs().style('right: 20px; bottom: 20px');
</script>
小播构图方式：
使用指令 tz.lzRot() 做3个旋转元素，元素类名为 petal；.petal选择器带一个伪元素，复刻主元素的背景但做scale调整使之成为 96 衔接姿式。其实，如何设计也还应根据图片的特性而定。 .petal选择器和它的伪元素，构成了正反的两种图图，它们各按180度生成3个旋转元素，就有了这样的6个旋转元素的组合。漂亮{:4_187:} 这样翻转里的top: -50%;和伪元素里的top:100%;的设置，我还得使劲去理解一下，还是带着 transform-origin: 50% 100%;的设定的，如果没有这两个top，旋转中心还是挺好理解的，这两个top还是有点费解。 黑黑又带来了小播制作的新思路，很赞{:4_199:} 红影 发表于 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
黑黑又带来了小播制作的新思路，很赞
简单玩也能玩出花样 小播构图新颖，谢谢马老师精彩分享{:4_190:} 我事先码代码存下来，一下子看不懂，小花好看{:4_204:}{:4_187:}
喜欢马老师的代码音画，马老师创作辛苦了。{:4_190:}我最怕代码了{:4_181:} 马黑黑 发表于 2025-11-30 12:51
.petal 加上伪元素后从占位层面看是一个整体，有50%的高度在小播容器外围，所以 .petal 要向上拉50%。
...
无论是旋转中心还是图片的位置，都是针对元素而言的，所以，因为考虑伪元素的底部衔接而做的设置，克服这个，需要提 50% 。 马黑黑 发表于 2025-11-30 12:52
设计思路其实非常简单
就那两个top需要想想，其他的还是能理解的。做出来的感觉简单，凭空想的时候可不简单呢{:4_187:} 马黑黑 发表于 2025-11-30 12:52
简单玩也能玩出花样
代码倒是真的简洁，这玩法还是挺新的啊，不简单呢{:4_187:} 红影 发表于 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
我事先码代码存下来，一下子看不懂，小花好看
{:4_190:}