网站首页 › ┫特效音画┣ › 【漫步特效】太阳照常升起

云端漫步 发表于 2025-9-6 19:12:46

【漫步特效】太阳照常升起

本帖最后由 云端漫步 于 2025-9-12 12:22 编辑 <br /><br /><style>
#papa {
    margin: 150px 0 10px calc(50% - 800px);
    width: 1800px;
    height: 900px;
    background:
      url('http://kkshan.com/data/attachment/forum/202509/12/044632j7732h79nw9e777o.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: 350px;
    height: 350px;
    opacity: .96;
    top: 30px;
    right: 420px; /* 调整位置 */
    object-fit: cover;
    border-radius: 50%;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 12;
}
/* 新增的第二个视频样式 */
#vid3 {
    position: absolute;
    width: 350px;
    height: 350px;
    opacity: .96;
    top: 30px;
    right: 30px; /* 与原视频并排 */
    object-fit: cover;
    border-radius: 50%;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 12;
}
#vid2 {
    position: absolute;
    width: 112%;
    height: 100%;
    opacity: .26;
    object-fit: cover;
    mix-blend-mode: screen;
    pointer-events: none;
}
</style>
<div id="papa">
<!-- 原视频 -->
<video id="vid1" src="https://link.hhtjim.com/163/462791.mp4" autoplay loop muted></video>
<!-- 新增的第二个视频 -->
<video id="vid3" src="https://link.hhtjim.com/163/464132.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f335322bc5.mp4" autoplay loop muted></video>
</div>
<script>
(function() {
    let rotDeg = 0, prgDeg = 0, raf;
    // 检查canv元素
    let canv = document.getElementById('canv');
    if (!canv) {
      canv = document.createElement('canvas');
      canv.id = 'canv';
      canv.width = 200;
      canv.height = 200;
      document.getElementById('papa').appendChild(canv);
    }
    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();
    // 修正图片URL
    img.src = 'https://picsum.photos/200/200';


         if (window.aud) {
            raf = window.aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(mkProg);
      } else {
            raf = requestAnimationFrame(mkProg);
      }
    };
   
    let mState = () => {
      if (window.aud) {
            window.aud.paused
                ? (document.getElementById('papa').style.setProperty('--state','paused'),
                   document.getElementById('vid1').pause(),
                   document.getElementById('vid3').pause(),
                   document.getElementById('vid2').pause())
                : (document.getElementById('papa').style.setProperty('--state','running'),
                   document.getElementById('vid1').play(),
                   document.getElementById('vid3').play(),
                   document.getElementById('vid2').play());
      }
    };
   
    // 检查aud元素是否存在
    if (window.aud) {
      window.aud.addEventListener('pause', () => mState());
      window.aud.addEventListener('playing', () => mState());
      window.aud.onpause = window.aud.onplaying = () => mkProg();
      window.aud.onseeking = () => raf = cancelAnimationFrame(raf);
      window.aud.ontimeupdate = () => prgDeg = window.aud.currentTime * 360 / window.aud.duration;
      canv.onclick = () => window.aud.paused ? window.aud.play() : window.aud.pause();
    } else {

      mkProg();
    }
})();
</script>
<br><br><br><br><br>

云端漫步 发表于 2025-9-6 19:13:28

<iframe border="0" marginwidth="0" marginheight="0" src="http://www.iyinren.com/template/default/widget/share.php?id=18828" height="100" frameborder="no" width="310"></iframe>

云端漫步 发表于 2025-9-6 19:13:40

帖子内人物是俄罗斯发言人扎哈罗娃姑娘时代照片儿。扎哈罗娃出生于一个俄罗斯外交官家庭，因父亲工作调动，
她曾随家人移居中国北京，并在那里度过了她的童年。1991年，十六岁的扎哈罗娃进入北京第五十五中学就读，
她能说出流利的汉语。并说中国是她第二故乡。

圊圊淥詶 发表于 2025-9-6 20:24:50

来欣赏漫步老师的特效~~

圊圊淥詶 发表于 2025-9-6 20:26:00

做的很棒，还有视频，
漫步老师制作分享辛苦了，晚上好~~

玫の玫 发表于 2025-9-6 21:31:11

漫步老师又有新作了，太勤快了！

玫の玫 发表于 2025-9-6 21:32:22

特效美美哒，听乐赏图，感谢美作分享！

绿蔷薇 发表于 2025-9-6 22:12:09

年轻时的扎哈罗娃也是一个大美人，现在多了一份干练和威严~~{:4_123:}

绿蔷薇 发表于 2025-9-6 22:14:27

画面很美，视频一下加入了二个哈，谢谢漫步老师精心的制作，欣赏很过瘾~~{:S01:}

绿蔷薇 发表于 2025-9-6 22:14:45

漫步老师周末快乐哈~~~{:S06:}

查看完整版本: 【漫步特效】太阳照常升起