请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
此前我们使用 tz.svgsonsRot 绘制了五叶草小播，它基于SVG矢量图形，获得更佳的效果。实现相同绘制功能还有一个 tz.lzRot() 指令，基于 HTML元素，使用CSS属性 clip-path 对N个子元素进行切割、均匀旋转构图，可放大缩小。二者都有一定难度，可通过学习实例代码熟悉掌握。
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
/* .leaf选择器制定单片叶子样式 */
.leaf {
position: absolute;
width: 100%;
height: 100%;
background: var(--cc);
/* 剪裁路径基于 100*100 视口 */
clip-path: path('M50 50 C10 -12, 90 -12, 50 50');
}
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.js';
const tz = TZ.TZ('pa');
// 小播容器，定义id以便子元素认亲，使用 .wrap 类选择器
tz.add('div', 'player', 'wrap100', {
style: 'transform: scale(3);' // 放大三倍
});
// {option} 里是固定的元素配置，共四个参数，顺序不论
tz.lzRot(5, 'player', {
cc: 'green', // ① cc变量用于css变量 --cc
className: 'leaf', // ② 类选择器
//tag: 'div', // ③ 默认使用 div 标签
//angle: 360 // ④ 默认是360分配角度
});
</script>
| 
发表于 2025-10-21 20:44
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主