论坛 › 动画音画 › 云水逸（学习黑师2024072《出埃及记》视频遮罩效果）

南无月 发表于 2024-7-23 18:02

云水逸（学习黑师2024072《出埃及记》视频遮罩效果）

<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 831px);
        width: 1500px;
        height: 720px;
        background: url('https://642303.freep.cn/642303/tu/20240723gunv03.webp') no-repeat center/cover;
        box-shadow: 0 0 10px rgba(0,0,0,.6);
        z-index: 1;
        pointer-events: none;
        overflow: hidden;
        position: relative;
}
#vid {
        position: absolute;
        bottom: 0;
        width: 50%;
        height: calc(100% + 65px);
        object-fit: cover;
        transform: rotate(90deg);
    filter: hue-rotate(0deg);
        -webkit-mask:conic-gradient(transparent,transparent, red, transparent,blue,transparent,transparent,green,transparent,transparent,purple, red, transparent,transparent,blue,transparent,transparent,green,transparent,transparent,purple, red, transparent,blue,transparent,green,transparent,purple);
        -webkit-mask: radial-gradient(circle,silver, lightgreen, cyan, transparent,transparent);
        opacity: .49;
       
        }
   
#player {
        position: absolute;
        left: 324px;
        bottom: 344px;
        width: 100px;
        cursor: pointer;
        pointer-events: auto;
        filter: hue-rotate(260deg);
        animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(-360deg); } }
.mypic1 {
   position: absolute;
   transform: rotate(0deg);
    right:-60px;   
    bottom:-90px;   
    mix-blend-mode: screen;
    z-index: 3;
    -webkit-mask: linear-gradient(-90deg,transparent,red 90%,transparent 75%, transparent);
    }
#tit {
      position: absolute;
      top:0px;
      right: 2%;
      background-image:url('https://pic.imgdb.cn/item/65a377bd871b83018ac3682a.gif');
      background-size:cover;
      width:80px; height:720px;
      font: bold 2.4em sans-serif;
      text-align:center;
      line-height:50px;
      color:transparent;writing-mode:vertical-rl;
      -webkit-background-clip:text;
}
</style>

<div id="mydiv">
<div id="tit">《云水逸》-黑师《出埃及记》视频遮罩</div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=340850" autoplay loop></audio>
        <div class="mypic1"><img src="https://pic.imgdb.cn/item/65b5f220871b83018a1a6e04.webp" alt="" /></div>
        <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/40/5d2174fda34bd.mp4" autoplay loop muted></video>
        <img id="player" alt="" title="播放/暂停" src="https://638183.freep.cn/638183/small/hxxb.webp" />
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => {
        player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? vid.pause() : vid.play();
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

南无月 发表于 2024-7-23 18:02

@马黑黑 白老师来瞧一眼，今天的视频遮罩作业。。。{:4_173:}

南无月 发表于 2024-7-23 18:04

试着用了放射渐 变，透明加颜色。。视频如伞骨一般显示。。
因为有硬边，看着不自然。
先是试着添加线性渐变，无效果。。
后来改为径向渐变，边缘用透明，硬边消失，效果还不错。。

马黑黑 发表于 2024-7-23 18:33

角向渐变 conic-gradient 的应用，效果很好，高大上的样纸

小辣椒 发表于 2024-7-23 18:37

月月好久不见了{:4_171:}

打开界面就感觉制作大气，画面灵动，效果美极了{:4_178:}

小辣椒 发表于 2024-7-23 18:39

音乐也是配的好，必须赞的~~{:4_199:}

红影 发表于 2024-7-23 19:58

月儿灵活运用遮罩效果，不但视频是遮罩效果，连动图也是遮罩来的，效果非常惊艳。{:4_199:}

红影 发表于 2024-7-23 19:59

这张背景也好美，这样的帖子带给人美的享受{:4_199:}

南无月 发表于 2024-7-23 20:54

马黑黑 发表于 2024-7-23 18:33
角向渐变 conic-gradient 的应用，效果很好，高大上的样纸

角向渐变，好哒我以后要记得这个名字{:4_173:}

南无月 发表于 2024-7-23 20:54

小辣椒 发表于 2024-7-23 18:37
月月好久不见了

打开界面就感觉制作大气，画面灵动，效果美极了

有阵子手边没电脑，就没法整贴子了。。
小辣椒好啊~~{:4_187:}

马黑黑 发表于 2024-7-23 20:55

南无月 发表于 2024-7-23 20:54
角向渐变，好哒我以后要记得这个名字

{:4_190:}

南无月 发表于 2024-7-23 20:55

小辣椒 发表于 2024-7-23 18:39
音乐也是配的好，必须赞的~~

小辣椒对音乐很有研究。。你说好那就真的是好了。
跟画面搭就去找了古风的轻音乐，感觉比较合意，就用了。。{:4_187:}

南无月 发表于 2024-7-23 20:57

红影 发表于 2024-7-23 19:58
月儿灵活运用遮罩效果，不但视频是遮罩效果，连动图也是遮罩来的，效果非常惊艳。

看到老师出的贴子就想试试另外的渐变，
没想到这个效果的兼容性极好。还真可以。。
问好影子。{:4_187:}

南无月 发表于 2024-7-23 20:59

红影 发表于 2024-7-23 19:59
这张背景也好美，这样的帖子带给人美的享受

同感。。
我也觉得这组图挺漂亮，本来是窄图硬用两张P成一张宽图来用了。。{:4_187:}

南无月 发表于 2024-7-23 21:05

马黑黑 发表于 2024-7-23 20:55


灌水就是为了这杯咖啡{:4_170:}

红影 发表于 2024-7-23 22:37

南无月 发表于 2024-7-23 20:59
同感。。
我也觉得这组图挺漂亮，本来是窄图硬用两张P成一张宽图来用了。。

原来是月儿自己修整后的图图，厉害了{:4_187:}

红影 发表于 2024-7-23 22:37

南无月 发表于 2024-7-23 20:57
看到老师出的贴子就想试试另外的渐变，
没想到这个效果的兼容性极好。还真可以。。
问好影子。{:4_187: ...

月儿的探索很有成效呢{:4_187:}

海笑 发表于 2024-7-24 07:25

欣赏老师佳作！

梦江南 发表于 2024-7-24 11:37

老师的图图漂亮，遮罩也漂亮！

查看完整版本: 云水逸（学习黑师2024072《出埃及记》视频遮罩效果）