马黑黑 发表于 2025-10-26 19:49

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

<div class="codebox" data-prev="1">
&lt;style&gt;
        @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%; /* 旋转中心 */
        }
&lt;/style&gt;

&lt;div class="pa"&gt;&lt;/div&gt;

&lt;script type="module"&gt;
        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',
        });
&lt;/script&gt;
</div>

<script type="module">
        import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
        linenumber();
</script>

杨帆 发表于 2025-10-26 20:56

漂亮！谢谢马老师精彩分享{:4_191:}

小辣椒 发表于 2025-10-26 21:04

花花加蝴蝶{:4_205:}

马黑黑 发表于 2025-10-26 21:44

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

{:4_173:}

马黑黑 发表于 2025-10-26 21:44

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

{:4_190:}

红影 发表于 2025-10-26 22:22

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

红影 发表于 2025-10-26 22:23

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

马黑黑 发表于 2025-10-26 23:15

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

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

红影 发表于 2025-10-29 20:43

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

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

马黑黑 发表于 2025-10-29 21:43

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

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

红影 发表于 2025-10-29 22:55

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

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

马黑黑 发表于 2025-10-29 23:05

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

酱紫最理想
页: [1]
查看完整版本: tz之图片背景组合小播演示