tz之图片背景组合小播演示

马黑黑

<style> @import 'https://638183.freep.cn/638183/web/tz/tz.min.css'; /* .petal宽高度依据图片尺寸。父元素宽高各100、强制子元素绝对居中 */ .petal { width: 75px; height: 160px; top: -110px; /* 居上半部，父元素高度100，160-100/2 = 110 */ background: url('https://638183.freep.cn/638183/small/2025/fl1026.gif'); transform-origin: 50% 100%; /* 旋转中心 */ } </style> <div class="pa"></div> <script type="module"> import TZ from 'https://638183.freep.cn/638183/web/tz/tz.min.js'; const tz = TZ.TZ('pa'); tz.add('div', 'mum', 'wrap100 rot-ani'); tz.lzRot(6, 'mum', { className: 'petal', }); </script>

杨帆

漂亮！谢谢马老师精彩分享

小辣椒

花花加蝴蝶

马黑黑

小辣椒 发表于 2025-10-26 21:04
花花加蝴蝶

马黑黑

杨帆 发表于 2025-10-26 20:56
漂亮！谢谢马老师精彩分享

红影

“父元素宽高各100、强制子元素绝对居中”这里是强制图案的根部居中吧，正在对应《战地往事》在看，那个帖子里的width: 50%; height: 50%; 是图片尺寸的50%吧，两个图图的旋转基点都是 50% 100% 也就是图片的中心下部，并且这个点也是小播的选装中心。

红影

这里的和战地帖子里的图图不同，倒是很能说明问题呢。

马黑黑

红影 发表于 2025-10-26 22:22
“父元素宽高各100、强制子元素绝对居中”这里是强制图案的根部居中吧，正在对应《战地往事》在看，那个帖 ...

里面的元素通过 设置位置到容器的上半部，然后依次旋转构图，旋转点相对与父元素而言是在其中心，相对于子元素而言是在其X方向中心、Y方向底部。

红影

马黑黑 发表于 2025-10-26 23:15
里面的元素通过 设置位置到容器的上半部，然后依次旋转构图，旋转点相对与父元素而言是在其中心，相对于 ...

嗯嗯，这些设定还是挺重要的。

马黑黑

红影 发表于 2025-10-29 20:43
嗯嗯，这些设定还是挺重要的。

一切与设计相关，怎么设计，怎么运筹

红影

马黑黑 发表于 2025-10-29 21:43
一切与设计相关，怎么设计，怎么运筹

然后得到的效果就是设计之时需要出现的效果。

马黑黑

红影 发表于 2025-10-29 22:55
然后得到的效果就是设计之时需要出现的效果。

酱紫最理想