云端漫步 发表于 2026-3-21 13:49:51

【漫步幻影粒子特效】天，快亮了

<style>
#mydiv {
    margin: 150px 0 10px calc(50% - 900px);
    width: 1800px;
    height: 900px;
    background: lightblue url('https://644220.freep.cn/644220/w/33k.JPG') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#vid {
    position: absolute;
    width: 130%;
    height: 130%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    mask: linear-gradient(to top right, red 88%, transparent 0);   
    -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);   
    z-index: 3;
    opacity: .35;
}
#new-vid {
    position: absolute;
    top: 0px;
    left: 0px;;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 2;
    opacity: 0.95;
    mix-blend-mode: normal;
    mask: none;
    -webkit-mask: none;
}
#top-png {
    position: absolute;
    width: 100%;
    height: 100%;   
    object-fit: cover;
    pointer-events: none;
    z-index: 5;
    opacity: 1;
}
#text-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 160px;
    text-align: center;
    z-index: 10;
    font-size: 40px;
    font-weight: bold;
}
#wait-txt {
    color: red;
    animation: color-flash 1s infinite alternate, opacity-flash 1s infinite alternate;
}
@keyframes color-flash {
    0% { color: #ff0000; }
    25% { color: #ffff00; }
    50% { color: #0099ff; }
    75% { color: #33ff00; }
    100% { color: #ff00ff; }
}
@keyframes opacity-flash {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}
#lyric-txt {
    color: #ffffff;
    text-shadow: 0 0 10px #000;
    animation: white-to-red 2s linear infinite alternate;
    display: none;
}
@keyframes white-to-red {
    0% { color: #ffffff; }
    100% { color: #ff3333; }
}

video::-webkit-media-controls {
    display: none !important;
}
video {
    -webkit-appearance: none;
}
</style>

<div id="mydiv">
    <audio id="aud" src="https://ting8.yymp3.com/yymp3/01cn/02new/baixue/02.mp3" autoplay loop></audio>
    <video id="new-vid" src="https://644220.freep.cn/644220/qq/2/22k.mp4" autoplay loop muted playsinline></video>
    <video id="vid" src="https://yw83yw.oss-cn-hangzhou.aliyuncs.com/lvzhou/flash/MP4/DH04.mp4" autoplay loop muted></video>
    <img id="top-png" src="https://644220.freep.cn/644220/w/ttr.png">
    <div id="text-wrap">
      <div id="wait-txt">天，快亮了</div>
      <div id="lyric-txt"></div>
    </div>
</div>
<script type="text/javascript">
window.onload = function() {
    setTimeout(function() {
      document.getElementById("wait-txt").style.display = "none";
      document.getElementById("lyric-txt").style.display = "block";
    }, 5000); // 5000毫秒=5秒
    var audio = document.getElementById("aud");
    var lyricTxt = document.getElementById("lyric-txt");
    var lyrics = [
      {t:15.00, txt:'哎哎哎'}, // 新增：流星划过前的歌词
      {t:18.74, txt:'流星划过夜的黑'},
      {t:22.83, txt:'心突然变得脆容易碎'},
      {t:27.34, txt:'透明的美'},
      {t:31.27, txt:'寂寞的无聊虚伪里的自豪'},
      {t:36.41, txt:'回忆变成煎熬'},
      {t:39.49, txt:'相遇太早缘份少'},
      {t:43.45, txt:'无所谓'},
      {t:47.60, txt:'心里是画不完的句号'},
      {t:52.43, txt:'却又抹不掉'},
      {t:56.00, txt:'忘不了'},
      {t:60.35, txt:'想要逃跑离越远越好'},
      {t:65.07, txt:'日子多长等待有多少'},
      {t:68.64, txt:'爱要如何相随'},
      {t:72.10, txt:'你我如何依偎'},
      {t:75.22, txt:'那种滋味让人不喝却让人醉'},
      {t:81.17, txt:'还没做好准备'},
      {t:84.59, txt:'让风来吹一吹'},
      {t:87.87, txt:'就当心从来就不曾破碎'},
      {t:92.47, txt:'从没后悔'},
      {t:106.68, txt:'寂寞让我无法睡'},
      {t:110.96, txt:'心突然变得脆容易溃'},
      {t:115.32, txt:'谁错谁对'},
      {t:119.18, txt:'不迟也不早想你在这一秒'},
      {t:124.51, txt:'你给的圈套'},
      {t:127.56, txt:'想逃却又往里跳'},
      {t:131.45, txt:'无所谓'},
      {t:135.80, txt:'心里是画不完的句号'},
      {t:140.50, txt:'却又抹不掉'},
      {t:144.04, txt:'忘不了'},
      {t:148.28, txt:'想要逃跑离越远越好'},
      {t:152.99, txt:'日子多长等待有多少'},
      {t:156.68, txt:'爱要如何相随'},
      {t:160.18, txt:'你我如何依偎'},
      {t:163.23, txt:'那种滋味让人不喝却让人醉'},
      {t:169.18, txt:'还没做好准备'},
      {t:172.52, txt:'让风来吹一吹'},
      {t:175.85, txt:'就当心从来就不曾破碎'},
      {t:180.61, txt:'从没后悔'},
      {t:206.92, txt:'爱要如何相随'},
      {t:210.30, txt:'你我如何依偎'},
      {t:213.46, txt:'那种滋味让人不喝却让人醉'},
      {t:219.43, txt:'还没做好准备'},
      {t:222.89, txt:'让风来吹一吹'},
      {t:226.09, txt:'就当心从来就不曾破碎'},
      {t:230.70, txt:'从没后悔'},
      {t:235.25, txt:'爱要如何相随'},
      {t:238.69, txt:'你我如何依偎'},
      {t:241.87, txt:'那种滋味让人不喝却让人醉'},
      {t:247.85, txt:'还没做好准备'},
      {t:251.20, txt:'让风来吹一吹'},
      {t:254.47, txt:'就当心从来就不曾破碎'},
      {t:259.24, txt:'没后悔'}
    ];
    var index = 0;
    audio.ontimeupdate = function() {
      if (index < lyrics.length && audio.currentTime >= lyrics.t) {
            lyricTxt.innerText = lyrics.txt;
            index++;
      }
      if (audio.currentTime >= audio.duration - 1) {
            index = 0;
      }
    };
};
</script>

云端漫步 发表于 2026-3-21 13:50:57

十七八年前一些制作FLASH动画爱好者，喜欢用幻影粒子软件制作幻影粒子导入点缀FLASH动画画面，
增加画面感。如云粒子 、雨 、光朿 、雷电 、流水 、瀑布 、雪、幻影、等粒子，其实熊猫千库等
粒子都可用幻影粒子软件和AE软件制作，这作品共用了七个粒子在幻影粒子软件制作视频而成。

绿蔷薇 发表于 2026-3-21 15:52:32

撒花花
漫步老师周末嗨皮

绿蔷薇 发表于 2026-3-21 15:53:33

呀，手机上也能看到特效～{:4_123:}

绿蔷薇 发表于 2026-3-21 15:54:23

等会儿回家了，爬电脑上细赏～{:9_285:}

欧阳风刀 发表于 2026-3-21 19:47:24

7 种粒子效果，丰富的画面层次感与动感。漫步兄好制作。

欧阳风刀 发表于 2026-3-21 19:48:25

问好漫步兄，感谢分享精彩。

绿蔷薇 发表于 2026-3-21 20:41:31

对，过去听说过幻影粒子，我一直不会做这些，只有羡慕的份~~

绿蔷薇 发表于 2026-3-21 20:44:56

作品共用了七个粒子
中式窗棂与暖光光束，搭配蝴蝶、粒子光效等点缀元素
精彩个，模拟自然现象棒棒哒
漫步老师是一位资深的怀旧创作者

绿蔷薇 发表于 2026-3-21 20:46:41

漫步老师制作辛苦了，谢谢带来的精彩~~{:1_154:}
页: [1] 2 3
查看完整版本: 【漫步幻影粒子特效】天，快亮了