css+svg类多叶草小播样式
<p id="code_box" style="text-align: center;"><style>
#qpath { transform-origin: 50%; animation: rot 6s linear infinite, chgcolor 12s linear infinite alternate; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes chgcolor { to { fill: rgba(0,128,0,.5); } }
</style>
<svg id="msvg" width="200" height="200">
<defs>
<g id="qpath"fill="rgba(0,100,100,.1)" stroke="crimson" stroke-width="2">
<path d='M100 120,C-10 -30,210 -30,100 120'/>
</g>
</defs>
</svg>
</p>
<p>代码：</p>
<div class="hE"><pre id="pre1"></pre></div>
<script>
mkLeaves = (total) => {
let str = '';
Array(total).fill().forEach((_,idx) => {
str += `\t<use href="#qpath" transform="rotate(${360 / total * idx} 100 100)"/>\n`;
});
return str;
};
msvg.innerHTML += mkLeaves(5);
pre1.textContent = code_box.innerHTML;
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>
多少张叶子就用多少个 use 标签，角度按 360 ÷ 叶子数给 这叶片真漂亮，组合起来也很美。svg图图真的有无限可能呢{:4_199:} 小播里的色彩还是变化的，真漂亮{:4_199:} 红影 发表于 2024-10-2 23:16
这叶片真漂亮，组合起来也很美。svg图图真的有无限可能呢
这是使用了三次贝塞尔曲线绘制的像水滴一样的单个形状然后再按一定角度旋转。一楼的代码可以生成随意叶数的效果。 马黑黑 发表于 2024-10-2 23:18
这是使用了三次贝塞尔曲线绘制的像水滴一样的单个形状然后再按一定角度旋转。一楼的代码可以生成随意叶数 ...
叶数如果多了，水滴应该再瘦点才好看{:4_173:} 马黑黑 发表于 2024-10-2 22:14
多少张叶子就用多少个 use 标签，角度按 360 ÷ 叶子数给
明白了，叶子数得算角度，自己添加。 花飞飞 发表于 2024-10-3 11:43
明白了，叶子数得算角度，自己添加。
对 红影 发表于 2024-10-3 11:00
叶数如果多了，水滴应该再瘦点才好看
改改路径就行 马黑黑 发表于 2024-10-3 11:48
改改路径就行
嗯，这个修改倒是不难，主要能想到水滴的形式不容易{:4_187:} 红影 发表于 2024-10-3 12:09
嗯，这个修改倒是不难，主要能想到水滴的形式不容易
简单用路径设计水滴并不难 马黑黑 发表于 2024-10-3 13:00
简单用路径设计水滴并不难
能想到去使用水滴就不容易呢{:4_187:} 红影 发表于 2024-10-3 13:12
能想到去使用水滴就不容易呢
多吃猪脑子就成{:4_170:} 马黑黑 发表于 2024-10-3 11:44
对
灵活 花飞飞 发表于 2024-10-3 17:25
灵活
变通 马黑黑 发表于 2024-10-3 17:36
变通
七十二变 花飞飞 发表于 2024-10-3 17:44
七十二变
姓孙的 马黑黑 发表于 2024-10-3 13:25
多吃猪脑子就成
咋换了，不是多吃鱼么{:4_173:} 红影 发表于 2024-10-3 20:27
咋换了，不是多吃鱼么
你不爱吃鱼就吃猪脑好了 马黑黑 发表于 2024-10-3 21:34
你不爱吃鱼就吃猪脑好了
都不喜欢，有没有其他选择{:4_173:}
页:
[1]
2