爱你一万年，，学习黑黑老师战争艺术代码

梦江南

[i=s] 本帖最后由 梦江南 于 2024-10-31 07:33 编辑 [/i]

红影

江南这么快就把这个效果用上了呢，还做了图片轮播效果。
帖子的内容很温馨，欣赏江南好帖

起个网名好难

1. <style>
2. :root {--fState:running}
3. .sBall { filter: drop-shadow(-2px -2px 4px darkred); transition: .4s; cursor: pointer; animation: flash .2s var(--fDelay) linear infinite alternate var(--fState); }
4. .sBall:hover { r: 30; }
5. @keyframes flash { to { opacity: .5; } }
6. </style>
7. <div id="heart" style="width:250px;height:200px;margin:auto;">
8. </div>
9. <script>
10. function genTagObj(parentNode, jsonData) {
11. let sObj = document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);
12. for (let key in jsonData) {
13. if(key === 'tag') {
14. continue;
15. }
16. else if (jsonData.hasOwnProperty(key)) {
17. sObj.setAttribute(key, jsonData[key]);
18. }
19. }
20. console.log(document);
21. if(parentNode) parentNode.appendChild(sObj);
22. else document.body.appendChild(sObj);
23. return sObj;
24. }
25. let mysvg = genTagObj(heart,{'tag':'svg','xmlns':"http://www.w3.org/2000/svg", 'viewBox':'0 0 800 800'});
26. let path = genTagObj(mysvg,{'tag':'path','d':'M30 200 A 175 150 0 0 1 400 200 A 175 150 0 0 1 770 200 Q 800 600 400 750 Q 0 600 30 200','fill':'none','stroke':'none','id':'path'});
27. let numPoints = 30 , delta = path.getTotalLength() / numPoints;
28. for(let i = 0 ; i < numPoints; i ++) {
29. let point = path.getPointAtLength(delta * i);
30. let color = '#' + Math.random().toString(16).substring(2,8);
31. let fDelay = Math.random() * i * -0.1;
32. genTagObj(mysvg,{'tag':'circle','cx':`${point.x}`,'cy':`${point.y}`,'r':20,'class':'sBall', 'fill':`${color}`, 'style':`--fDelay: ${fDelay}s`});
33. }
35. </script>

复制代码

梦江南

红影 发表于 2024-10-30 13:47
江南这么快就把这个效果用上了呢，还做了图片轮播效果。
帖子的内容很温馨，欣赏江南好帖

问好影子，我只会套用，这圆点路径不会弄，只能这样了。

梦江南

起个网名好难 发表于 2024-10-30 14:17
本帖最后由 起个网名好难 于 2024-10-30 14:18 编辑
:root   {--fState:running}
        .sBall { filter: dr ...

老师的爱心圆 点根本不知道怎么去套。

梦油

岁月如歌，陪伴是最长情的告白，两位老夫妻相互扶持，患难与共，谱写了一曲恩爱的乐章。

梦江南

起个网名好难 发表于 2024-10-30 16:29

您 示范的圆点会闪光的，加进去怎么不会闪光了呢？

梦江南

梦油 发表于 2024-10-30 16:35
岁月如歌，陪伴是最长情的告白，两位老夫妻相互扶持，患难与共，谱写了一曲恩爱的乐章。

不管是夫妻还是朋友，陪伴是最长情的告白。谢谢梦油老师分享支持。问好！

起个网名好难

梦江南 发表于 2024-10-30 17:09
您 示范的圆点会闪光的，加进去怎么不会闪光了呢？

先前为避免冲突改了几个变量的名称，发上去没注意，这回应该好了。

梦江南

我明天再来编辑

红影

梦江南 发表于 2024-10-30 15:51
问好影子，我只会套用，这圆点路径不会弄，只能这样了。

这个帖子很温馨啊，多美好的彼此陪伴

梦江南

起个网名好难 发表于 2024-10-30 18:06
先前为避免冲突改了几个变量的名称，发上去没注意，这回应该好了。

问好老师，这下比较满意了。谢谢辛苦！

梦江南

红影 发表于 2024-10-30 21:07
这个帖子很温馨啊，多美好的彼此陪伴

正像梦油老师所说的，岁月如歌，陪伴是最长情的告白，两位老夫妻相互扶持，患难与共。早上好！

红影

梦江南 发表于 2024-10-31 07:39
正像梦油老师所说的，岁月如歌，陪伴是最长情的告白，两位老夫妻相互扶持，患难与共。早上好！

是的，谢谢江南带来如此美好的镜头

小九

很温馨的画面，很暖

梦江南

红影 发表于 2024-10-31 10:52
是的，谢谢江南带来如此美好的镜头

其实是黑黑老师的战争艺术代码给我的灵感。下午好！

梦江南

小九 发表于 2024-10-31 10:58
很温馨的画面，很暖

谢谢小九老师光临支持。下午好！

红影

梦江南 发表于 2024-10-31 14:39
其实是黑黑老师的战争艺术代码给我的灵感。下午好！

战争过后是和平和美好

梦江南

红影 发表于 2024-10-31 15:09
战争过后是和平和美好

对啊，珍惜现在和平环境中的美好生活。

梦油

梦江南 发表于 2024-10-30 17:12
不管是夫妻还是朋友，陪伴是最长情的告白。谢谢梦油老师分享支持。问好！

有人陪伴就是幸福。