网站首页 › ┫特效音画┣ › 【漫步特效】《如愿》致革命前辈们

云端漫步 发表于 2025-9-4 21:24:56

【漫步特效】《如愿》致革命前辈们

<style>
#papa {
    margin: 150px 0 10px calc(50% - 731px);
    width: 1700px;
    height: 850px;
    background:
      url('http://kkshan.com/data/attachment/forum/202509/04/204132mt1ttpj3t331cvvt.jpg') no-repeat center/cover;
    background-blend-mode: darken;
    box-shadow: 3px 3px 20px #000;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
#papa:hover {
    background-blend-mode: overlay;
}
#canv {
    display: block;
    position: absolute;
    right:230px;
    bottom:50px;
    transform: scale(0.65);
    cursor: pointer;
    opacity: .96;
}
#vid1 {
    position: absolute;
    width: 450px; /* 增大视频尺寸 */
    height: 450px; /* 增大视频尺寸 */
    opacity: .7;
    /* 调整位置向右移动一些 */
    top: 50%;
    left: 45%; /* 从40%调整到45%，向右移动 */
    transform: translate(-50%, -50%);
    object-fit: cover;
    border-radius: 50%;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 12;
}
#vid2 {
    position: absolute;
    width: 112%;
    height: 100%;
    opacity: .20;
    object-fit: cover;
    mix-blend-mode: screen;
    pointer-events: none;
}
</style>
<div id="papa">
<video id="vid1" src="https://cccimg.com/view.php/0aaf7cbf70d7508fd4ec4bea52555a07.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2475824/00/01/99/5b4eef7814dad.mp4" autoplay loop muted></video>
<canvas id="canv" width="200" height="200"></canvas>
<audio id="aud" src=""></audio>
</div>
<script>
(function() {
    let rotDeg = 0, prgDeg = 0, raf;
    let ctx = canv.getContext('2d');
    ctx.lineWidth = 10;
    ctx.lineCap = 'round';

    let gradient = ctx.createLinearGradient(0, 0, 200, 200);
    gradient.addColorStop(0, 'DarkKhaki');
    gradient.addColorStop(.5, 'orange');
    gradient.addColorStop(1, 'White');

    let img = new Image();
    img.onload = () => mkProg();
    img.src = 'https:/f.svg';

    let mkProg = () => {
      ctx.clearRect(0, 0, 200, 200);
      //111
      ctx.strokeStyle = '#FFA500';
      ctx.beginPath();
      ctx.arc(100, 100, 90, 0, 360 * Math.PI/180);
      ctx.stroke();
      //222
      ctx.save();
      ctx.strokeStyle = gradient;
      ctx.beginPath();
      ctx.arc(100, 100, 90, 0, prgDeg * Math.PI/180);
      ctx.stroke();
      ctx.restore();
      //333
      ctx.save();
      ctx.translate(100, 100);
      ctx.rotate(rotDeg * Math.PI/180);
      ctx.translate(-100, -100);
      ctx.drawImage(img, 20, 20, 160, 160);
      ctx.restore();
      rotDeg = (rotDeg + 1) % 360;
      raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(mkProg);
    };
let mState = () => {
    aud.paused
      ? (papa.style.setProperty('--state','paused'), vid1.pause(), vid2.pause())
      : (papa.style.setProperty('--state','running'),vid1.play(),vid2.play());
    // draw(); // 注释掉避免
};
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
    aud.onpause = aud.onplaying = () => mkProg();
    aud.onseeking = () => raf = cancelAnimationFrame(raf);
    aud.ontimeupdate = () => prgDeg = aud.currentTime * 360 / aud.duration;
    canv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<br><br><br><br><br>
<audio style="width:1px;height:1px;" controls="controls" autoplay="autoplay" loop="loop" src="https://mp3.joy127.com/music/12491.mp3">
</think></think>

云端漫步 发表于 2025-9-4 21:25:48

谭维维

欧阳风刀 发表于 2025-9-4 22:24:46

革命前辈从未走远，革命精神薪火相传。

欧阳风刀 发表于 2025-9-4 22:26:21

视频加入巧妙，播放流畅。漫步兄制作精湛，感谢分享啊。:handshake

玫の玫 发表于 2025-9-5 11:41:28

欣赏漫步老师精彩之作！

玫の玫 发表于 2025-9-5 11:42:34

很棒的制作，画中画，听歌赏图，掌声响起！

绿蔷薇 发表于 2025-9-5 13:09:51

你是遥遥的路
山野大雾里的灯
我是孩童啊 走在你的眼眸
你是明月清风
我是你照拂的梦
见与不见都一生 与你相拥
而我将 爱你所爱的人间
愿你所愿的笑颜
你的手我蹒跚在牵
请带我去明天
如果说 你曾苦过我的甜
我愿活成你的愿
愿不枉啊 愿勇往啊
这盛世每一天
你是岁月长河
星火燃起的天空
我是仰望者 就把你唱成歌
你是我之所来
也是我心之所归
世间所有路都将 与你相逢
而我将 爱你所爱的人间
愿你所愿的笑颜
你的手我蹒跚在牵
请带我去明天
如果说 你曾苦过我的甜
我愿活成你的愿
愿不枉啊 愿勇往啊
这盛世每一天
山河无恙 烟火寻常
可是你如愿的眺望
孩子们啊 安睡梦乡
像你深爱的那样
而我将 梦你所梦的团圆
愿你所愿的永远
走你所走的长路
这样的爱你啊
我也将 见你未见的世界
写你未写的诗篇
天边的月 心中的念
你永在我身边
与你相约 一生清澈
如你年轻的脸

绿蔷薇 发表于 2025-9-5 13:13:09

革命前辈们用奋斗换来的《如愿》
就是今天的山河无恙、盛世太平~~~

绿蔷薇 发表于 2025-9-5 13:17:56

画面是舞台的场景，视频嵌入很巧妙，影像片段里满是前辈们拼搏的身影，瞬间将人带入深沉的共情氛围~~

绿蔷薇 发表于 2025-9-5 13:20:53

原素材谭维维是一袭黑衣
漫步老师将其变色为炽热庄重的紫红
更贴近歌曲的情感基调~~~
非常细心的设计与制作，漫步老师强悍~~
{:1_150:}

查看完整版本: 【漫步特效】《如愿》致革命前辈们