马黑黑《这个图案以前用svgdr画过》
<div class="hEdiv" data-prev="1"><pre class="hEpre"><style>
/* svg id选择器可以定义使用的部分属性（fill、stroke-*等） */
#msvg { display: block; margin: auto; fill: none; stroke: steelblue; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
/* 外层图案（齿轮）样式 */
.path{ stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw linear 6s var(--delay) forwards; --delay: 4s; }
/* 里层图案（圆）样式 */
.cc { animation: grow linear 4s forwards; }
/* 描边动画 */
@keyframes draw { to { stroke-dashoffset: 0; } }
/* 圆变大动画 */
@keyframes grow { to { r: 120; } }
</style>
<svg id="msvg" width="600" height="600" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg"></svg>
<script>
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
function tzRun() {
var dr = _dr(msvg);
const vertex1 = dr.circlePoints(26, 200, 180); // 外切圆1点坐标
const vertex2 = dr.circlePoints(26, 200, 160); // 外切圆2点坐标
// 拼接路径
let path = 'M';
for (let i = 0; i < vertex1.length; i++) {
const v1 = vertex1.join(',');
const v2 = vertex2.join(',');
path += i % 2 === 0 ? v1 + ' ' + v2 + ' ' : v2 + ' ' + v1 + ' ';
};
path += 'Z'; // 路径闭环
dr.path(path).set('class', 'path'); // 绘制路径
dr.elm.style.setProperty('--len', dr.elm.getTotalLength()); // 设置--len变量
dr.circle(0, 0, 0).set('class', 'cc'); // 画圆
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script>
</pre></div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
const divs = document.querySelectorAll('.hEdiv');
const pres = document.querySelectorAll('.hEpre');
divs.forEach((div,idx) => hl.hl(div, pres));
</script>
实用的教程，谢谢分享
页:
[1]