【漫步幻影粒子特效】军港之夜
本帖最后由 云端漫步 于 2026-4-25 15:16 编辑 <br /><br /> <title>军港之夜</title><style>
#mydiv {
margin: 130px 0 30px calc(50% - 900px);
display: grid;
place-items: center;
width: 1700px;
height: 850px;
background: lightblue url('https://644220.freep.cn/644220/1/7uu.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: .65;
}
#new-vid {
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: calc(100% + 100px);
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;
}
video::-webkit-media-controls {
display: none !important;
}
video {
-webkit-appearance: none;
}
#lyric-container {
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
z-index: 99;
text-align: center;
width: 80%;
}
#title-text {
font-size: 40px;
font-weight: bold;
margin-bottom: 20px;
display: block;
background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ffff00);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: smoothJump 0.8s ease-in-out infinite;
transform: translateZ(0);
backface-visibility: hidden;
}
.lyric-line {
font-size: 36px;
font-weight: bold;
margin: 10px 0;
background: linear-gradient(to right, #ff0000, #0000ff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: none;
}
.lyric-line.active {
display: block;
}
@keyframes smoothJump {
0% { transform: translateY(0) scale(1); }
25% { transform: translateY(-8px) scale(1.05); }
50% { transform: translateY(-15px) scale(1.1); }
75% { transform: translateY(-8px) scale(1.05); }
100% { transform: translateY(0) scale(1); }
}
</style>
</head>
<body>
<div id="mydiv">
<audio id="aud" src="https://ting9.yymp3.com/new9/penliyuan2/6.mp3" autoplay loop></audio>
<video id="new-vid" src="https://644220.freep.cn/644220/qq/2/7uu.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 playsinline></video>
<img id="top-png" src="https://644220.freep.cn/644220/1/8uuy.png" alt="PNG">
<div id="lyric-container">
<div id="title-text">军港之夜</div>
<div id="lyric-content"></div>
</div>
</div>
<script>
const lyrics = [
{ time: 44.26, text: "军港的夜静悄悄 静悄悄" },
{ time: 57.40, text: "海浪把战舰轻轻地摇 轻轻地摇" },
{ time: 70.46, text: "年轻的水兵头枕着波涛" },
{ time: 78.78, text: "睡梦中露出甜美的微笑" },
{ time: 91.84, text: "海风你轻轻地吹" },
{ time: 95.90, text: "海浪你轻轻地摇" },
{ time: 100.33, text: "水兵远航多么辛劳" },
{ time: 108.99, text: "回到了祖国母亲的怀抱" },
{ time: 117.50, text: "让我们的水兵好好睡觉" },
{ time: 154.28, text: "军港的夜啊静悄悄" },
{ time: 162.66, text: "海浪把战舰轻轻地摇" },
{ time: 170.97, text: "年轻的水兵头枕着波涛" },
{ time: 179.46, text: "睡梦中露出甜美的微笑" },
{ time: 188.18, text: "海风你轻轻地吹" },
{ time: 192.39, text: "海浪你轻轻地摇" },
{ time: 196.92, text: "水兵远航多么辛劳" },
{ time: 205.66, text: "待到朝霞映红了海面" },
{ time: 214.16, text: "看我们的战舰又要起锚" },
{ time: 222.78, text: "啊……" },
{ time: 231.35, text: "看我们的战舰又要起锚" }
];
const audio = document.getElementById('aud');
const titleText = document.getElementById('title-text');
const lyricContent = document.getElementById('lyric-content');
function initLyrics() {
lyrics.forEach((item, index) => {
const div = document.createElement('div');
div.className = 'lyric-line';
div.dataset.time = item.time;
div.textContent = item.text;
div.id = `lyric-${index}`;
lyricContent.appendChild(div);
});
}
function updateContent() {
const currentTime = audio.currentTime;
if (currentTime >= 44.26) {
titleText.style.display = 'none';
} else {
titleText.style.display = 'block';
}
lyrics.forEach((item, index) => {
const lyricLine = document.getElementById(`lyric-${index}`);
const nextTime = lyrics ? lyrics.time : 999;
if (currentTime >= item.time && currentTime < nextTime) {
lyricLine.classList.add('active');
} else {
lyricLine.classList.remove('active');
}
});
}
window.onload = function() {
initLyrics();
audio.muted = false;
setInterval(updateContent, 50);
};
</script>
</body> 欣赏漫步老师美作，
感谢精彩分享，
感谢给大家带来美滴享受！
祝创作愉快，
天天好心情！ 画面融合了军港的硬朗与少女的柔婉，
军港之夜的歌词藏在光影里 .
老师制作辛苦了！{:1_153:}{:1_155:} 欣赏漫步老师精彩大作！ 画面元素丰富，色彩运用漂亮。欣赏漫步兄特效佳作。 周末愉快啊。{:1_153:} 玫の玫 发表于 2026-4-18 20:37
欣赏漫步老师美作，
感谢精彩分享，
感谢给大家带来美滴享受！
谢谢临帖支持。祝你开心每一天，让我们同享音画的乐趣！
也祝你元旦快乐，在生活愉快，工作顺利，全家安康！ 醉美水芙蓉 发表于 2026-4-18 21:16
欣赏漫步老师精彩大作！
谢谢临帖支持。祝你开心每一天，让我们同享音画的乐趣！
也祝你元旦快乐，在生活愉快，工作顺利，全家安康！ 欧阳风刀 发表于 2026-4-18 21:17
周末愉快啊。
谢谢临帖支持。祝你开心每一天，让我们同享音画的乐趣！
也祝你元旦快乐，在生活愉快，工作顺利，全家安康！ 欣赏漫步老师的精彩之作~