旋转 + 变色
本帖最后由 起个网名好难 于 2024-9-19 12:25 编辑 <br /><br /><style>.oBlk {position:absolute;animation:rot 10s linear infinite;}
.oBlk:nth-child(1) {width:50px;left:80px;top:80px;}
.oBlk:nth-child(2) {width:100px;left:150px;top:150px;}
.oBlk:nth-child(3) {width:200px;left:250px;top:50px;}
@keyframes rot { to { transform: rotate(2turn); } }
</style>
<div style="width:800px;height:450px;position: relative;">
<div class="oBlk">
<svg version="1.1" viewBox="-100 -100 200 200" >
<polygon points="-25 5,25 -25, 0 50" fill="#be08f590" transform="rotate(0) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#0762bb90" transform="rotate(60) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#fcf30590" transform="rotate(120) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#be08f590" transform="rotate(180) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#0762bb90" transform="rotate(240) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#fcf30590" transform="rotate(300) translate(0,-50)"></polygon>
</svg>
</div>
<div class="oBlk">
<svg version="1.1" viewBox="-100 -100 200 200" >
<polygon points="-25 5,25 -25, 0 50" fill="#be08f590" transform="rotate(0) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#0762bb90" transform="rotate(60) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#fcf30590" transform="rotate(120) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#be08f590" transform="rotate(180) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#0762bb90" transform="rotate(240) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#fcf30590" transform="rotate(300) translate(0,-50)"></polygon>
</svg>
</div>
<div class="oBlk">
<svg version="1.1" viewBox="-100 -100 200 200" >
<polygon points="-25 5,25 -25, 0 50" fill="#be08f590" transform="rotate(0) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#0762bb90" transform="rotate(60) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#fcf30590" transform="rotate(120) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#be08f590" transform="rotate(180) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#0762bb90" transform="rotate(240) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#fcf30590" transform="rotate(300) translate(0,-50)"></polygon>
</svg>
</div>
</div>
<script>
let pgs = document.querySelectorAll('polygon');
function chgColor() {
pgs.forEach(pg => {
pg.setAttribute('fill',"#" + Math.random().toString(16).substring(2,8))
});
}
setInterval(chgColor, 1000);
</script> 老师厉害，欣赏点赞！ 梦江南 发表于 2024-9-19 09:03
老师厉害，欣赏点赞！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
[灌水]小练习 起个网名好难 发表于 2024-9-19 09:10
[灌水]小练习
兴趣来了！{:4_173:} 漂亮，这个边旋转边自己变色，每个三角遵循着自己的颜色变化顺序变化着{:4_187:} 梦江南 发表于 2024-9-19 09:16
兴趣来了！
漂亮的、复杂的做不来，只好做个小的、不入流的过过瘾{:5_106:} 红影 发表于 2024-9-19 09:22
漂亮，这个边旋转边自己变色，每个三角遵循着自己的颜色变化顺序变化着
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
相同形状不颜色的做一个也可以。 我对svg还有点懵，难难厉害{:4_187:} 红影 发表于 2024-9-19 09:27
我对svg还有点懵，难难厉害
这个就是多个多边形（三角形） 起个网名好难 发表于 2024-9-19 10:03
这个就是多个多边形（三角形）
原理知道，真的去做还是不行{:4_173:} 起个网名好难 发表于 2024-9-19 09:27
相同形状不颜色的做一个也可以。
还是多几个变色的好看{:4_204:} 红影 发表于 2024-9-19 16:08
原理知道，真的去做还是不行
就是抄《锯片》代码简化改造了下 红影 发表于 2024-9-19 16:13
还是多几个变色的好看
先间后繁，一个有了多几个就不成问题了。 起个网名好难 发表于 2024-9-19 16:30
就是抄《锯片》代码简化改造了下
会改造也是本事{:4_173:} 起个网名好难 发表于 2024-9-19 16:31
先间后繁，一个有了多几个就不成问题了。
多几个就需要涉及到排位了啊。 红影 发表于 2024-9-19 16:42
会改造也是本事
就是把别人的删几条也算本事？ 红影 发表于 2024-9-19 16:43
多几个就需要涉及到排位了啊。
又不要求美观，只要不摞在一起就行。 起个网名好难 发表于 2024-9-19 16:54
就是把别人的删几条也算本事？
知道怎么删，说明对代码很清楚啊{:4_204:} 起个网名好难 发表于 2024-9-19 16:55
又不要求美观，只要不摞在一起就行。
还能根据自己的喜好做些调整{:4_173:} 红影 发表于 2024-9-19 22:28
知道怎么删，说明对代码很清楚啊
试错呀，不对再来过，这样才记忆深刻。