论坛 › 动画音画 › 曙光

马黑黑 发表于 2023-4-16 12:02

曙光

<style>
#mydiv {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/webp1/ad1.webp') center/cover no-repeat;
        overflow: hidden;
        pointer-events: none;
        position: relative;
        --state: paused;
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
        width: 200px;
        height: 200px;
        background: url('https://638183.freep.cn/638183/t22/webp/star.webp') center/cover no-repeat;
        pointer-events: auto;
        cursor: pointer;
        animation: rot 6s infinite linear var(--state);
}
#mydiv::after {
        left: 580px;
        top: 120px;
}
.ball {
        --delay: 0s;
        position: absolute;
        width: 16px;
        height: 10px;
        border-radius: 50%;
        background: red;
        opacity: .7;
        offset-path: path('M-10 650 Q605 -50,1024 640');
        offset-distance: 0%;
        animation: shot 4s var(--delay) infinite linear var(--state);
}
@keyframes shot { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <span class="ball"></span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1413967568" autoplay="autoplay" loop="loop"></audio>

<script>
(function(){
Array.from({length: 50}).forEach( (item,key) => {
        let sp = document.createElement('span');
        sp.className = 'ball';
        sp.style.cssText += `
                background: #${Math.random().toString(16).substr(-6)};
                box-shadow: 30px 40px 0 #${Math.random().toString(16).substr(-6)}, 15px 20px 0 #${Math.random().toString(16).substr(-6)}, -30px -40px 0 #${Math.random().toString(16).substr(-6)}, -15px -20px 0 #${Math.random().toString(16).substr(-6)};
                --delay: ${key * Math.random() + .4}s;
        `;
        mydiv.appendChild(sp);
});
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-4-16 12:02

帖子代码
<style>
#mydiv {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/webp1/ad1.webp') center/cover no-repeat;
        overflow: hidden;
        pointer-events: none;
        position: relative;
        --state: paused;
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
        width: 200px;
        height: 200px;
        background: url('https://638183.freep.cn/638183/t22/webp/star.webp') center/cover no-repeat;
        pointer-events: auto;
        cursor: pointer;
        animation: rot 6s infinite linear var(--state);
}
#mydiv::after {
        left: 580px;
        top: 120px;
}
.ball {
        --delay: 0s;
        position: absolute;
        width: 16px;
        height: 10px;
        border-radius: 50%;
        background: red;
        opacity: .7;
        offset-path: path('M-10 650 Q605 -50,1024 640');
        offset-distance: 0%;
        animation: shot 4s var(--delay) infinite linear var(--state);
}
@keyframes shot { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <span class="ball"></span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1413967568" autoplay="autoplay" loop="loop"></audio>

<script>
Array.from({length: 50}).forEach( (item,key) => {
        let sp = document.createElement('span');
        sp.className = 'ball';
        sp.style.cssText += `
                background: #${Math.random().toString(16).substr(-6)};
                box-shadow: 30px 40px 0 #${Math.random().toString(16).substr(-6)}, 15px 20px 0 #${Math.random().toString(16).substr(-6)}, -30px -40px 0 #${Math.random().toString(16).substr(-6)}, -15px -20px 0 #${Math.random().toString(16).substr(-6)};
                --delay: ${key * Math.random() + .4}s;
        `;
        mydiv.appendChild(sp);
});
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2023-4-16 12:04

另一个效果

曙光 (freeee.ml)

红影 发表于 2023-4-16 13:55

哈哈，导弹发射，这准备收复宝岛的节奏么{:4_173:}

红影 发表于 2023-4-16 14:11

把一颗星放在灯塔上，这个构思漂亮。{:4_187:}

红影 发表于 2023-4-16 14:12

offset-path:的路径怎么设置又忘记了，这个貌似讲过的{:4_173:}

樵歌 发表于 2023-4-16 15:39

外星人鸡地，{:4_203:}

马黑黑 发表于 2023-4-16 15:45

樵歌 发表于 2023-4-16 15:39
外星人鸡地，

看到鸡喜木有{:4_170:}

马黑黑 发表于 2023-4-16 15:47

红影 发表于 2023-4-16 13:55
哈哈，导弹发射，这准备收复宝岛的节奏么

你看，悄然理解为彩虹桥，和你的理解相反。两种手段：和平，暴力。

樵歌 发表于 2023-4-16 15:47

马黑黑 发表于 2023-4-16 15:45
看到鸡喜木有

俺要求不高，有凤来仪就可以了{:4_173:}

马黑黑 发表于 2023-4-16 15:50

红影 发表于 2023-4-16 14:12
offset-path:的路径怎么设置又忘记了，这个貌似讲过的

是的，这个讲有。主要是两个要领：

一、设置路径

offset-path: path('路径描述');

二、运动对象在路径上的位置

offset-distasnce: 10%;

最后是路径，你曾经设置过复杂的蜜蜂路线（虽然不一定是用这个path，但道理是相同的）。

马黑黑 发表于 2023-4-16 15:51

红影 发表于 2023-4-16 14:11
把一颗星放在灯塔上，这个构思漂亮。

灯塔上本来有颗小星，覆盖了

马黑黑 发表于 2023-4-16 15:53

樵歌 发表于 2023-4-16 15:47
俺要求不高，有凤来仪就可以了
额，凤对外星人来说，比鸡低级

梦油 发表于 2023-4-16 17:06

真大气，真大气！

马黑黑 发表于 2023-4-16 17:17

梦油 发表于 2023-4-16 17:06
真大气，真大气！

不知道音乐是否合适

雨中悄然 发表于 2023-4-16 17:33

本帖最后由 雨中悄然 于 2023-4-16 17:35 编辑

马黑黑 发表于 2023-4-16 15:47
你看，悄然理解为彩虹桥，和你的理解相反。两种手段：和平，暴力。
{:4_170:}我思维比较幼稚

雨中悄然 发表于 2023-4-16 17:36

原来两颗星星是播放器。
先点了彩虹桥没反应{:4_173:}

红影 发表于 2023-4-16 18:00

马黑黑 发表于 2023-4-16 15:47
你看，悄然理解为彩虹桥，和你的理解相反。两种手段：和平，暴力。

该强硬就强硬啊，有这么多导弹打过去，也很壮观啊{:4_170:}

红影 发表于 2023-4-16 18:08

马黑黑 发表于 2023-4-16 15:50
是的，这个讲有。主要是两个要领：

一、设置路径


原来offset-path 是接收一个 SVG 路径，SVG 路径当时是使劲看过的，我再去复习一下去{:4_173:}

红影 发表于 2023-4-16 18:09

马黑黑 发表于 2023-4-16 15:51
灯塔上本来有颗小星，覆盖了

这个大星好，更霸气{:4_173:}

查看完整版本: 曙光