论坛 › 音乐沙龙 › turn of lights（学习黑黑Earth代码效果）

红影 发表于 2024-9-28 14:49

turn of lights（学习黑黑Earth代码效果）

<style>
#tz { margin: 60px 0 30px calc(50% - 681px); width: 1200px; height: 675px; background: url('https://pic.imgdb.cn/item/66f75fabf21886ccc0d76778.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 0 0 6px #111; z-index: 1; position: relative; border-radius: 18px; }
#player { position: absolute; left: 446px; top: 100px;cursor: pointer; fill: none; stroke: Cyan; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;}
li-zi { position: absolute; width: 16px; height: 7px; offset-path: path('M0 180Q200 200,576 675'); offset-distance: 0%; background: DarkTurquoise; animation: moving 10s linear infinite var(--state); }
#vid { position: absolute; width: 100%; height: calc(100% + 120px); bottom: 0; opacity: 0.75;object-fit: cover; pointer-events: none; mix-blend-mode: screen; }
#wenzi { position: absolute; left: 200px; top: 20px; fill:cyan; pointer-events: none; }
@keyframes moving {        to { offset-distance: 100%; } }
</style>

<div id="tz">
        <!--turn of lights -->
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2055757529" autoplay loop></audio>
        <svg id="player" width="300" height="300" viewBox="-100 -100 200 200">
                <ellipse cx="0" cy="0" rx="80" ry="20" fill="none" stroke-width="4" stroke="Cyan" stroke-dasharray="4 8"></ellipse>
                <ellipse cx="0" cy="0" rx="80" ry="20" pathLength="1" transform="rotate(90)">
                        <animate id="b1" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="0s;e1.end+.5s" fill="freeze"/>
                        <animate id="e1" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="e2.end" fill="freeze"/>
                </ellipse>
                <ellipse cx="0" cy="0" rx="80" ry="20" pathLength="1" transform="rotate(135)">
                        <animate id="b2" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="b1.end" fill="freeze"/>
                        <animate id="e2" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="e3.end" fill="freeze"/>
                </ellipse>
                <ellipse cx="0" cy="0" rx="80" ry="20" pathLength="1" transform="rotate(210)">
                        <animate id="b3" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="b2.end" fill="freeze"/>
                        <animate id="e3" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="b3.end+1s" fill="freeze"/>
                </ellipse>
        </svg>
        <svg id="wenzi" width="800" height="100" >
        <text id="txt" x="0" y="50%" text-anchor="start" dominant-baseline="middle" font-size="48" font-family="Times New Roman" font-style="italic">
                turnoflights
                <animate id="xmove" attributeName="x" values="0;0;0" dur="20s" repeatCount="indefinite" />
        </text>
</svg>
        <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c7fb5ec08c_10s_big.mp4" autoplay loop muted></video>
</div>

<script>
Array(total=40).fill(0).forEach((lz,key) => {
        lz = document.createElement('li-zi');
        lz.style.cssText += `animation-delay: -${10 / total * key}s`;
        if(key % 2 === 0) lz.style.offsetPath = `path('M1200 320Q680 500,646 675')`;
        tz.appendChild(lz);
        console.log(lz);
});
let svgwidth = wenzi.clientWidth, tb = txt.getBBox();
xmove.setAttribute('values', `0;${svgwidth - tb.width};0`);
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), player.pauseAnimations(), vid.pause(), wenzi.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), player.unpauseAnimations(), vid.play(), wenzi.unpauseAnimations());
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-9-28 14:51

小播没用那么多形状，只留了椭圆，那个粒子想学习一下怎样用二次贝塞尔曲线拟合底图形态，想多弄几条的，也不知道怎样控制，就两条吧{:4_173:}

红影 发表于 2024-9-28 14:52

还加了个黑黑今天讲的svg文本移动，不知道暂停时候怎么让它停下来@马黑黑 {:4_173:}

梦江南 发表于 2024-9-28 15:59

好漂亮背景，加上蓝色的粒子和移动文字，色调柔和，棒哒哒！{:4_187:}

梦江南 发表于 2024-9-28 16:01

红影 发表于 2024-9-28 14:52
还加了个黑黑今天讲的svg文本移动，不知道暂停时候怎么让它停下来@马黑黑

一般移动文字好像是不停的。黑黑老师可能有办法。

起个网名好难 发表于 2024-9-28 16:33

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

起个网名好难 发表于 2024-9-28 16:38

红影 发表于 2024-9-28 14:52
还加了个黑黑今天讲的svg文本移动，不知道暂停时候怎么让它停下来@马黑黑

wenzi.unpauseAnimations() / wenzi.pauseAnimations()

确定是 of 不是 off ？

梦油 发表于 2024-9-28 17:00

三好生，学得真快。

红影 发表于 2024-9-28 18:05

起个网名好难 发表于 2024-9-28 16:38
wenzi.unpauseAnimations() / wenzi.pauseAnimations()

确定是 of 不是 off ？

耶，果然如此，现在文字已经可以暂停了。难难聪明{:4_187:}
我太笨了，player有现成的例子，我竟然没想到{:4_173:}

红影 发表于 2024-9-28 18:05

起个网名好难 发表于 2024-9-28 16:38
wenzi.unpauseAnimations() / wenzi.pauseAnimations()

确定是 of 不是 off ？

of 和 off 是说歌名吧，我也觉得奇怪呢。但它的名字就是这样的。{:4_204:}

红影 发表于 2024-9-28 18:07

梦江南 发表于 2024-9-28 15:59
好漂亮背景，加上蓝色的粒子和移动文字，色调柔和，棒哒哒！

这个也是套用黑黑的代码呢，加了今天的移动文字{:4_173:}

红影 发表于 2024-9-28 18:08

梦江南 发表于 2024-9-28 16:01
一般移动文字好像是不停的。黑黑老师可能有办法。

现在已经能暂停了，看7楼难难给出的方法。其实player的svg就是这样停的，文字也一样呢{:4_187:}

红影 发表于 2024-9-28 18:09

梦油 发表于 2024-9-28 17:00
三好生，学得真快。

就是学着好玩呢，这些线条和文字都是能被代码控制的，特别好玩{:4_173:}

马黑黑 发表于 2024-9-28 18:20

红影 发表于 2024-9-28 14:52
还加了个黑黑今天讲的svg文本移动，不知道暂停时候怎么让它停下来@马黑黑

已经在另一个帖子中回复了你的问题。其实，暂停、继续svg动画你在另一个帖子中用过的

起个网名好难 发表于 2024-9-28 18:25

红影 发表于 2024-9-28 18:05
of 和 off 是说歌名吧，我也觉得奇怪呢。但它的名字就是这样的。

哦， 是个歌曲名啊

世外桃源 发表于 2024-9-29 12:29

欣赏欣赏，优秀作业{:4_199:}

梦油 发表于 2024-9-29 19:31

红影 发表于 2024-9-28 18:09
就是学着好玩呢，这些线条和文字都是能被代码控制的，特别好玩

很好看。

小辣椒 发表于 2024-9-29 19:54

亲爱的，好制作{:4_199:}

小辣椒 发表于 2024-9-29 19:57

效果特别美，哈哈，可以套用玩一个了{:4_205:}

红影 发表于 2024-9-29 21:45

马黑黑 发表于 2024-9-28 18:20
已经在另一个帖子中回复了你的问题。其实，暂停、继续svg动画你在另一个帖子中用过的

嗯嗯，一会我去看看，谢谢黑黑{:4_187:}

查看完整版本: turn of lights（学习黑黑Earth代码效果）