论坛 › 欢乐水吧 › 今夜无眠 （学习套用黑黑视频遮罩效果）

小辣椒 发表于 2024-7-26 21:43

今夜无眠 （学习套用黑黑视频遮罩效果）

<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 779px);
        width: 1383px;
        height: 744px;
        background: url('https://wj.zp68.com/lxx/yunhua/2022/08/06/9IF.gif') 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: 100%;
        height: calc(100% + 65px);
        object-fit: cover;
        -webkit-mask: linear-gradient(180deg, red 70%, transparent 85%, transparent);
}
#player {
        position: absolute;
        left: 80px;
        bottom: 80px;
        width: 100px;
        cursor: pointer;
        pointer-events: auto;
        filter: invert(.55);
        animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(-360deg); } }

.pic1 {
   position: absolute;
   transform: rotate(0deg);
   right:160px;   
   top:10px;
    mix-blend-mode: screen;
    z-index: 3;
    -webkit-mask: linear-gradient(-90deg,transparent,red 90%,transparent 95%, transparent);
    }

.pic2 {
   position: absolute;
   transform: rotate(0deg);
   left: 60px;
   top:50px;
    mix-blend-mode: screen;
    z-index: 4;

    }

.pic3 {
   position: absolute;
   transform: rotate(0deg);
   width: 499px;
   height: 365px;
   left: 80px;
   top:-30px;
    mix-blend-mode: screen;
    z-index: 5;

    }

</style>

<div id="mydiv">
        <audio id="aud" src="https://wj1.zp68.com:812/lxx/yy/jywm.mp3" autoplay loop></audio>

<div class="pic1"><img src="https://wj.zp68.com/lxx/yunhua/2024/07/26/01.gif" alt="" /></div>
<div class="pic2"><img src="https://wj.zp68.com/lxx/yunhua/2024/07/26/02.gif" alt="" /></div>
<div class="pic3"><img src="https://wj.zp68.com/lxx/yunhua/2024/07/26/03.jpg" alt="" /></div>

        <video id="vid" src="https://txcdn-data.mvbox.cn/live/vp/38/66e2e727fea16961dd08020f53bbf087.mp4" autoplay loop muted></video>
        <img id="player" alt="" title="播放/暂停" src="https://xlaj.cn/assets/file/zp/20240106162128.svg" />
</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-26 21:45

@马黑黑

谢谢黑黑源码分享，小辣椒就玩一个最简单的套用了{:4_173:}

视频遮罩效果感觉很好玩的，只是还没有仔细学会全方位的操作

小辣椒 发表于 2024-7-26 21:47

@走过岁月

岁月还是用了你的视频，一个以前的旧图（也是你的AE制作），加了个现在的视频，玩一个视频遮罩效果
谢谢岁月，小辣椒还是离不开你的东东{:4_172:}

马黑黑 发表于 2024-7-26 22:10

小辣椒 发表于 2024-7-26 21:45
@马黑黑

谢谢黑黑源码分享，小辣椒就玩一个最简单的套用了


这里面除了遮罩（--webkit-mask），还需要渐变加持（linear-gradient、radial-gradient、conic-gradient）

小辣椒 发表于 2024-7-26 22:17

马黑黑 发表于 2024-7-26 22:10
这里面除了遮罩（--webkit-mask），还需要渐变加持（linear-gradient、radial-gradient、conic-gradient ...

我这个源码里面没有发现有这组代码？这个代码在那个源码里面呢，小辣椒太多教程没有看了

红影 发表于 2024-7-26 22:34

这个漂亮，亲爱的这么快就把岁月那个视频用上了，太赞了{:4_187:}

马黑黑 发表于 2024-7-26 23:10

小辣椒 发表于 2024-7-26 22:17
我这个源码里面没有发现有这组代码？这个代码在那个源码里面呢，小辣椒太多教程没有看了

丢的课程太多，眼前的东东看不出来：

#vid {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: calc(100% + 65px);
        object-fit: cover;
        -webkit-mask: linear-gradient(180deg, red 70%, transparent 85%, transparent);
}

红色部分代码，遮罩所用的就是渐变

小辣椒 发表于 2024-7-26 23:14

马黑黑 发表于 2024-7-26 23:10
丢的课程太多，眼前的东东看不出来：

#vid {


这个我一直在奇怪的，怎么加了红颜色的，后面的我改了一下透明度

其实这个代码我不懂

小辣椒 发表于 2024-7-26 23:15

马黑黑 发表于 2024-7-26 23:10
丢的课程太多，眼前的东东看不出来：

#vid {


是的啊，基本都不会了{:4_198:}

起个网名好难 发表于 2024-7-27 07:45

https://5b0988e595225.cdn.sohucs.com/images/20190518/07fd1eaeab804046a5fb0f081b932984.gif

海笑 发表于 2024-7-27 08:06

欣赏老师佳作！

愤怒的葡萄 发表于 2024-7-27 09:26

来欣赏楼主的大作。

梦江南 发表于 2024-7-27 11:21

中西结合非常出彩！赞！{:4_187:}

走过岁月 发表于 2024-7-27 13:41

这个舞场不错，小辣椒设计的巧妙

走过岁月 发表于 2024-7-27 13:44

小辣椒除非不做，一做就是惊艳

梦油 发表于 2024-7-27 14:18

往上窜的好像是烟花，真好看。

竹溪 发表于 2024-7-27 16:13

漂亮，欣赏老师好帖{:4_204:}

小辣椒 发表于 2024-7-28 11:55

起个网名好难 发表于 2024-7-27 07:45


问好难难，周末快乐~{:4_187:}

小辣椒 发表于 2024-7-28 11:55

海笑 发表于 2024-7-27 08:06
欣赏老师佳作！

问好海笑，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-7-28 11:56

愤怒的葡萄 发表于 2024-7-27 09:26
来欣赏楼主的大作。

问好葡萄，谢谢欣赏{:4_187:}

查看完整版本: 今夜无眠 （学习套用黑黑视频遮罩效果）