tzMaker指令 lzRot() 绘制多叶草小播演示
此前我们使用 tz.svgsonsRot 绘制了五叶草小播，它基于SVG矢量图形，获得更佳的效果。实现相同绘制功能还有一个 tz.lzRot() 指令，基于 HTML元素。本例，lzRot() 指令所绘制的图案，由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>
前一篇: svg文本在路径上均匀分布
下一篇: 自定义缩放元素
发表评论:
评论列表 [1条]
#1 | 悄然 于 2025-10-22 08:39 发布: 这个小草，我看到的是小草地呀。。
