论坛 › 欢乐水吧 › 爱你一万年，，学习黑黑老师战争艺术代码

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

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

本帖最后由 梦江南 于 2024-10-31 07:33 编辑 <br /><br /><style>
:root   {--state: running;}
#tz {
    margin: 30px 0 30px calc(50% - 621px);
    width: 1080px;
    height: 608px;
    background: url('https://www.yiyuen.com/e/file/view/665861') no-repeat center/cover;
    box-shadow: 4px 4px 8px gray;
    z-index: 1;
    position: relative;
    border-radius: 32px;
}

#mysvg {
    --state: running;
}

.ball {
    filter: drop-shadow(-10px -10px 20px darkred);
    transition: .4s;
    cursor: pointer;
    animation: bFlash .1s var(--delay) linear infinite alternate var(--state);
}

.ball:hover {
    r: 30;
}

@keyframes bFlash {
    to {
      opacity: .5;
    }
}

#heart {
    width: 550px;
    height: 440px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 5%);
}
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29723035.mp3" autoplay loop></audio>
<div id="heart"></div>
</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);
      }
    }
    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 delay = Math.random() * i * -0.1;
    genTagObj(mysvg, {
      'tag': 'circle',
      'cx': `${point.x}`,
      'cy': `${point.y}`,
      'r': 20,
      'class': 'ball',
      'fill': `${color}`,
      'style': `--delay: ${delay}s`
    });
}
document.querySelectorAll('.ball').forEach(b => b.onclick = () => {
    mysvg.style.setProperty('--state', ['paused', 'running'][+aud.paused]);
    aud.paused ? aud.play() : aud.pause();
});
aud.play().catch(_ => mysvg.style.setProperty('--state', 'paused'));
</script>

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

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

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

本帖最后由 起个网名好难 于 2024-10-31 07:42 编辑 <br /><br /><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);
                }
        }
        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
江南这么快就把这个效果用上了呢，还做了图片轮播效果。
帖子的内容很温馨，欣赏江南好帖

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

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

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

老师的爱心圆 点根本不知道怎么去套。{:4_201:}

梦油 发表于 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
问好影子，我只会套用，这圆点路径不会弄，只能这样了。

这个帖子很温馨啊，多美好的彼此陪伴{:4_187:}

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

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

问好老师，这下比较满意了。谢谢辛苦！{:4_190:}

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

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

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

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

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

是的，谢谢江南带来如此美好的镜头{:4_204:}

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

很温馨的画面，很暖{:4_187:}

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

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

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

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

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

谢谢小九老师光临支持。下午好！{:4_204:}

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

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

战争过后是和平和美好{:4_173:}

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

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

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

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

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

有人陪伴就是幸福。

查看完整版本: 爱你一万年，，学习黑黑老师战争艺术代码