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

梦江南 · 发表于 2024-10-30 12:15

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

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

红影 · 发表于 2024-10-30 13:47

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

起个网名好难 · 发表于 2024-10-30 14:17

本帖最后由起个网名好难于 2024-10-31 07:42 编辑

<style>
:root {--fState:running}
.sBall { filter: drop-shadow(-2px -2px 4px darkred); transition: .4s; cursor: pointer; animation: flash .2s var(--fDelay) linear infinite alternate var(--fState); }
.sBall:hover { r: 30; }
@keyframes flash { to { opacity: .5; } }
</style>
<div id="heart" style="width:250px;height:200px;margin:auto;">
</div>
<script>
function genTagObj(parentNode, jsonData) {
let sObj = document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);
for (let key in jsonData) {
if(key === 'tag') {
continue;
}
else if (jsonData.hasOwnProperty(key)) {
sObj.setAttribute(key, jsonData[key]);
}
}
console.log(document);
if(parentNode) parentNode.appendChild(sObj);
else document.body.appendChild(sObj);
return sObj;
}
let mysvg = genTagObj(heart,{'tag':'svg','xmlns':"http://www.w3.org/2000/svg", 'viewBox':'0 0 800 800'});
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'});
let numPoints = 30 , delta = path.getTotalLength() / numPoints;
for(let i = 0 ; i < numPoints; i ++) {
let point = path.getPointAtLength(delta * i);
let color = '#' + Math.random().toString(16).substring(2,8);
let fDelay = Math.random() * i * -0.1;
genTagObj(mysvg,{'tag':'circle','cx':`${point.x}`,'cy':`${point.y}`,'r':20,'class':'sBall', 'fill':`${color}`, 'style':`--fDelay: ${fDelay}s`});
}
</script>

复制代码

梦江南 · 发表于 2024-10-30 15:51

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

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

梦江南 · 发表于 2024-10-30 15:55

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

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

梦油 · 发表于 2024-10-30 16:35

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

梦江南 · 发表于 2024-10-30 17:09

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

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

梦江南 · 发表于 2024-10-30 17:12

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

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

起个网名好难 · 发表于 2024-10-30 18:06

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

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

梦江南 · 发表于 2024-10-30 18:16

我明天再来编辑

红影 · 发表于 2024-10-30 21:07

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

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

梦江南 · 发表于 2024-10-31 07:36

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

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

梦江南 · 发表于 2024-10-31 07:39

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

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

红影 · 发表于 2024-10-31 10:52

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

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

小九 · 发表于 2024-10-31 10:58

很温馨的画面，很暖

梦江南 · 发表于 2024-10-31 14:39

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

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

梦江南 · 发表于 2024-10-31 14:40

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

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

红影 · 发表于 2024-10-31 15:09

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

战争过后是和平和美好

梦江南 · 发表于 2024-10-31 15:33

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

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

梦油 · 发表于 2024-10-31 16:39

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

有人陪伴就是幸福。

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

请马上登录，朋友们都在花潮里等着你哦：）

评分

浏览过的版块

花潮美女

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

缤纷心情

心曲飞扬

花好月圆

飞龙在天

音画大师

花潮贵宾

多彩人生

星月交辉

海样胸怀

火热情怀

优雅迷人

神秘浪漫

草莓情怀

蝴蝶情怀

星星情怀

七彩绚丽

活泼开朗

女儿情怀

相遇之美

一往情深

心香一瓣

紫色情节

金剪刀

天籁妙音

妙笔生花

风雨同行

我心永远

天长地久

幸福快乐

绚丽缤纷

喜乐安康

中秋征文

周年庆

指尖上的流年

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节

花潮管理

花潮帅哥

王者至尊

大将风范

共看流星

心想事成

前途似锦

开朗大方

春风拂面

梦幻浪漫