使用svg渐变修饰rect做成的图案
<style>.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px / 26px sans-serif; }
#sbox { margin: 30px auto; position: relative; width: fit-content; height: fit-content; }
</style>
<div class="artbox">
<p>以下代码，利用svg线性渐变对rect矩形勾勒出所需形状，存放在defs标签内待用，然后通过3个use标签实例化并各自旋转一定角度，最后加一个圆在中央。圆有鼠标指针移动交互，不过存为.svg文档后当做img或背景图片使用时该交互行为失效。</p>
<div class="hE"><pre id="code">
<svg width="200" height="200" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
#ct{ cursor:pointer;transition:1s; }
#ct:hover{ r: 26px; }
</style>
<defs>
<linearGradient id="lgd1" x1="1" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="transparent" />
<stop offset="45%" stop-color="transparent" />
<stop offset="50%" stop-color="lightgreen" />
<stop offset="55%" stop-color="transparent" />
<stop offset="100%" stop-color="transparent" />
</linearGradient>
<g id="rect1"><rect x="-70" y="-70" width="140" height="140" fill="url(#lgd1)" /></g>
</defs>
<use x="0" y="0" href="#rect1" transform="rotate(0)" />
<use x="0" y="0" href="#rect1" transform="rotate(120)" />
<use x="0" y="0" href="#rect1" transform="rotate(240)" />
<circle id="ct" cx="0" cy="0" r="18" fill="#00800080" />
</svg>
</pre></div>
<p><button id="showcode" type="button" value="bnt">点击查看效果</button></p>
<div id="sbox" class="showDiv"></div>
</div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js/helight.js';
document.body.appendChild(sc);
showcode.onclick = () => {
showcode.disabled = true;
sbox.innerHTML = code.innerText;
}
</script>
<rect x="-70" y="-70" width="140" height="140"。。。这个是为了把矩形画到原点用的吧。
<linearGradient id="lgd1" x1="1" x2="0" y1="0" y2="1">这个没看懂，为什么渐变的起点和终点这么小？ 红影 发表于 2024-9-21 19:52
第一个问题：看viewBox属性。这是将矩形画在中央；
第二个问题：0=0%，1=100%，这是浮点数表示法，可以使用百分比如果愿意。 哦，取一根看了看，大概知道点了，这个x1="1" x2="0" y1="0" y2="1"是为了取个方向，后面还有offset呢，通过颜色的设计，就可以让矩形呈现出棍的样子了。 哦，取一根看了看，大概知道点了，这个x1="1" x2="0" y1="0" y2="1"是为了取个方向，后面还有offset呢，通过颜色的设计，就可以让矩形呈现出棍的样子了。 哦，原来1是浮点数，知道了{:4_187:}还是写成百分比比较好理解点。
红影 发表于 2024-9-21 20:09
哦，原来1是浮点数，知道了还是写成百分比比较好理解点。
百分比数值较长，有时候能短则短，不是啥都是越唱越好{:4_170:} 这个结构乍一看跟之前的《西亚风光》组合小播有点像，十字旋转叠加，这个是一根旋转叠加。。 用渐形绘形状是被老师用到极致了，200*200的方块渐变后成一条漂亮的线条，这个创意也是没谁了。{:4_173:} <svg width="200" height="200" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
#ct{ cursor:pointer;transition:1s; }
#ct:hover{ r: 26px; }
</style>
<defs>
<linearGradient id="lgd1" x1="1" x2="0" y2="0" y1="1">
<stop offset="0%" stop-color="transparent" />
<stop offset="48%" stop-color="transparent" />
<stop offset="50%" stop-color="yellow" />
<stop offset="52%" stop-color="transparent" />
<stop offset="100%" stop-color="transparent" />
</linearGradient>
<g id="rect1"><rect x="-70" y="-70" width="140" height="140" fill="url(#lgd1)" /></g>
</defs>
<use x="0" y="0" href="#rect1" transform="rotate(0)" />
<use x="0" y="0" href="#rect1" transform="rotate(10)" />
<use x="0" y="0" href="#rect1" transform="rotate(20)" />
<use x="0" y="0" href="#rect1" transform="rotate(30)" />
<use x="0" y="0" href="#rect1" transform="rotate(40)" />
<use x="0" y="0" href="#rect1" transform="rotate(50)" />
<use x="0" y="0" href="#rect1" transform="rotate(60)" />
<use x="0" y="0" href="#rect1" transform="rotate(70)" />
<use x="0" y="0" href="#rect1" transform="rotate(80)" />
<use x="0" y="0" href="#rect1" transform="rotate(90)" />
<use x="0" y="0" href="#rect1" transform="rotate(100)" />
<use x="0" y="0" href="#rect1" transform="rotate(110)" />
<circle id="ct" cx="0" cy="0" r="18" fill="#DAA52090" />
</svg> {:4_199:}{:4_178:} 马黑黑 发表于 2024-9-21 20:38
百分比数值较长，有时候能短则短，不是啥都是越唱越好
真会偷懒{:4_172:} 红影 发表于 2024-9-21 21:25
真会偷懒
哎呀，你还嫌svg代码不够长 红影 发表于 2024-9-21 20:01
哦，取一根看了看，大概知道点了，这个x1="1" x2="0" y1="0" y2="1"是为了取个方向，后面还有offset呢，通 ...
大概如此 花飞飞 发表于 2024-9-21 21:03
#ct{ cursor:pointer;transition:1s; }
#ct:hover{ r: 26px; }
你这个也太漂亮了吧 小辣椒 发表于 2024-9-21 21:09
谢顶 花飞飞 发表于 2024-9-21 21:03
用渐形绘形状是被老师用到极致了，200*200的方块渐变后成一条漂亮的线条，这个创意也是没谁了。
哪里哪里，都有都有 马黑黑 发表于 2024-9-21 21:31
大概如此
原来这小棍的粗细也可以在offset的百分比里调的呢，刚才跑去试了半天，不过我都是单根试的，想看看都会出现什么效果。 马黑黑 发表于 2024-9-21 21:29
哎呀，你还嫌svg代码不够长
不管长短，写成习惯的多好，前面就不会那么懵了{:4_173:} 红影 发表于 2024-9-21 21:48
不管长短，写成习惯的多好，前面就不会那么懵了
好吧