论坛 › 祝福礼堂 › 钢铁洪流进行曲 庆祝八一建军节

红影 发表于 2024-7-31 09:14

钢铁洪流进行曲 庆祝八一建军节

<style>
#mydiv {
        margin: 100px 0 30px calc(50% - 631px);
        width: 1100px;
        height: 620px;
        box-shadow: 2px 3px 6px rgba(0,0,0,.6);
        overflow: hidden;
        z-index: 1;
        pointer-events: none;
        position: relative;
}
#mydiv::after {
        position: absolute;
        content: '';
        right: -10px;
        top: -10px;
        width: 166px;
        height: 200px;
        background: url('https://pic.imgdb.cn/item/66a8fc33d9c307b7e94da6a7.png') no-repeat center/cover;
        pointer-events: auto;
        cursor: pointer;
        animation: rot 1.2sinfinitealternate var(--state);
}
#pic {
        position: absolute;
        bottom: 120px; left: 0;
        -webkit-mask: radial-gradient(circle, red,transparent);
        opacity: .9;
}
.vid {
        position: absolute;
        width: 1100px;
        height: 620px;
        object-fit: cover;
}
li-zi {
        position: absolute;
        left: calc(50% - 5px);
        bottom: 0;
        width: 40px;
        height: 40px;
        opacity: .4;
        border-radius: 50%;
        box-shadow: inset 0 0 40px yellow;
        animation: fly 12s linear infinite var(--state);
}
@keyframes fly { to { transform: translate(var(--xx), var(--yy)) rotate(var(--deg)); } }
@keyframes rot {from { transform: scale(1); filter: hue-rotate(0deg); }
        to { transform: scale(1.05);filter: hue-rotate(10deg); } }
</style>
<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1394369908" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/14331404/00/19/97/5f19564328143_10s_big.mp4" autoplay loop muted></video>
        <img id="pic" alt="" src="https://pic.imgdb.cn/item/66a8fcddd9c307b7e94e4a31.png" />
</div>

<script>
Array.from({length: 50}).forEach(lz => {
        lz = document.createElement('li-zi');
        var idx = Math.random() > 0.2 ? 1 : -1;
        lz.style.cssText += `
                background: #${Math.random().toString(16).substring(2,8)};
                animation-delay: -${Math.floor(Math.random() * 6)}s;
                --xx: ${idx * Math.random() * 1000}px;
                --yy: ${Math.random() * -800}px;
                --deg: ${Math.random() * 720}deg;
        `;
        mydiv.appendChild(lz);
});
var vids = mydiv.querySelectorAll('.vid');
var mState = () => {
        mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
        vids.forEach(vid => aud.paused ? vid. pause() : vid.play());
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-7-31 09:16

明天就是八一建军节，在这个美好的节日里，向论坛所有退役军人们表达崇高的敬意，祝节日愉快{:4_187:}
顺祝天下所有军人和退役军人们节日快乐{:4_177:}

红影 发表于 2024-7-31 09:19

学习黑黑《World IN Dream》代码效果，我把var idx = Math.random() > 0.2 ? 1 : -1; 判断取了偏向右边，让气泡少影响点人物{:4_173:} 感觉那个mask特别好，让图片融入无痕。
感谢@马黑黑 的代码，并祝节日愉快{:4_187:}

起个网名好难 发表于 2024-7-31 09:20

真快， 七月马上就过去了。

红影 发表于 2024-7-31 09:26

祝@樵歌 @小文 @荷戈使者 节日愉快{:4_187:}{:4_187:}
其他的还有谁我想不起来了{:4_173:}

红影 发表于 2024-7-31 09:38

起个网名好难 发表于 2024-7-31 09:20
真快， 七月马上就过去了。

是啊，明天就进入8月了，大半年过去了。

梦油 发表于 2024-7-31 09:41

向伟大的中国人民解放军致敬！
祝福人民子弟兵及其退转军人和家属节日快乐！
         https://pic.imgdb.cn/item/66a99928d9c307b7e9bcd9ee.gif

红影 发表于 2024-7-31 09:56

梦油 发表于 2024-7-31 09:41
向伟大的中国人民解放军致敬！
祝福人民子弟兵及其退转军人和家属节日快乐！

和梦油一起送上节日的祝福{:4_177:}

梦江南 发表于 2024-7-31 10:06

庆祝八一建军节！

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

梦江南 发表于 2024-7-31 10:06
庆祝八一建军节！

和江南一起祝贺{:4_187:}

梦油 发表于 2024-7-31 10:11

红影 发表于 2024-7-31 09:56
和梦油一起送上节日的祝福

祝你节日快乐！

马黑黑 发表于 2024-7-31 14:27

雄伟壮美

荷戈使者 发表于 2024-7-31 17:20

个人觉得，此《洪流曲》可算是新时期除《当那一天来临》外，难得的一首军歌了！

樵歌 发表于 2024-7-31 20:15

威武雄壮的军歌！祝坛儿上所有的战友们节日快乐！{:4_176:}

樵歌 发表于 2024-7-31 20:16

红影 发表于 2024-7-31 09:26
祝@樵歌 @小文 @荷戈使者 节日愉快
其他的还有谁我想不起来了

谢谢，师妹的祝贺贺！还有小辣椒、冬小雨、小虎妞也一起快乐！{:4_176:}

红影 发表于 2024-7-31 21:36

梦油 发表于 2024-7-31 10:11
祝你节日快乐！

这是军人的节日，我没当过兵啊{:4_173:}

红影 发表于 2024-7-31 21:36

马黑黑 发表于 2024-7-31 14:27
雄伟壮美

谢谢黑黑，节日快乐{:4_187:}

红影 发表于 2024-7-31 21:37

荷戈使者 发表于 2024-7-31 17:20
个人觉得，此《洪流曲》可算是新时期除《当那一天来临》外，难得的一首军歌了！

是的，《当那一天来临》也特别感人。问好荷戈使者，节日快乐{:4_187:}

红影 发表于 2024-7-31 21:38

樵歌 发表于 2024-7-31 20:15
威武雄壮的军歌！祝坛儿上所有的战友们节日快乐！

师兄好，节日快乐{:4_187:}

红影 发表于 2024-7-31 21:38

樵歌 发表于 2024-7-31 20:16
谢谢，师妹的祝贺贺！还有小辣椒、冬小雨、小虎妞也一起快乐！

这个还不知道呢，印象中小辣椒没有当过兵吧{:4_173:}

查看完整版本: 钢铁洪流进行曲 庆祝八一建军节