云端漫步 发表于 2025-7-30 22:29:39

【漫步特效】八一军旗红

<style>
#papa {
    margin: 130px 0 10px calc(50% - 931px);
    width: 1800px;
    height: 900px;
    background:
      url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/bnn.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: .111;
}
#vid1 {
    position: absolute;
    width: 350px;
    height: 350px;
    opacity: .46;
    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: .93;
    object-fit: cover;
    mix-blend-mode: screen;
    pointer-events: none;
}
</style>
<div id="papa">
<video id="vid1" src="https://img.tukuppt.com/video_show/2629112/00/02/25/5b5706705c66c.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2418175/00/02/31/5b5577348dded.mp4" autoplay loop muted></video>
</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);
      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>   
<div align="left"><audio style="width:0px;height:0px;" controls="controls" autoplay="autoplay" loop="loop" src="https://ting8.yymp3.com/new3/jlgq/39.mp3
" type="audio/mpeg"></audio></div>
<br><br><br><br><br>






绿蔷薇 发表于 2025-7-31 12:59:09

{:5_134:}明天就是中国人民解放军建军98周年了~~

绿蔷薇 发表于 2025-7-31 13:03:54

八一军旗红 烈士血染成
漫步老师把心中的情感
融入到每一个细节之中~~

绿蔷薇 发表于 2025-7-31 13:10:34

军旗迎风飘扬，阅兵珍贵影像重现在画面中
听着看着，身为中国人，那种自豪感油然而生
祝愿我军越来越强大，祝愿祖国更加繁荣昌盛

绿蔷薇 发表于 2025-7-31 13:11:31

谢谢漫步老师带来的精彩~~~{:5_130:}

玫の玫 发表于 2025-7-31 14:12:08

欣赏漫步老师美作，
红色绸带舞动，
“八一” 闪耀，
军人庄严敬礼，
背景里的建筑与方阵，
诉说着人民军队从无到有的坚守，
庆祝建军 98 周年的荣光，
在这一刻滚烫。

玫の玫 发表于 2025-7-31 14:12:57

红色铺陈的画面，
“建军节” 点燃敬意，
军人敬礼，
身后建筑与方阵，
串起 98 载风雨，
诉说着 “党旗下的忠诚，
守护中的深情”。

玫の玫 发表于 2025-7-31 14:13:40

红旗漫卷，
“八一” 辉耀，
军人以标准军礼，
致敬 98 年峥嵘。
背景里的故事，
从井冈山启程，
让 “人民子弟兵” 的誓言，
永远滚烫。

春华秋实 发表于 2025-7-31 15:39:42

八一军旗红，老兵敬礼致谢

紫雨琦琦 发表于 2025-7-31 16:46:13

{:5_134:}
热烈庆祝中国人民解放军建军98周年
页: [1] 2
查看完整版本: 【漫步特效】八一军旗红