论坛 › 欢乐水吧 › 《女人如水》TO水芙蓉美女（学习黑黑遮罩效果）

红影 发表于 2024-2-8 11:49

《女人如水》TO水芙蓉美女（学习黑黑遮罩效果）

<style>
#mydiv {
        margin: 80px 0 0 calc(50% - 681px);
        width: 1200px;
        height: 675px;
        background: url('https://pic.imgdb.cn/item/65c441979f345e8d038171b0.jpg');
        box-shadow: 4px 4px 12px rgba(0,0,0,.7);
        border: 1px solid gray;
        overflow: hidden;
        z-index: 1;
      background-repeat: repeat;
      background-size: 100% 100%;
      background-position: 0 0;
      animation: mov 60s infinite linear var(--state);
        position: relative;
}
#vid {
        position: absolute;
        width: 1200px;
        height: 675px;

               opacity(.25);
        object-fit: cover;
        mix-blend-mode: screen;
        clip-path: inset(35% 0 0 0);
}
#player {
        position: absolute;
        left: 11%;
        top: 20%;
        width: 160px;
        height: 160px;
        cursor: pointer;
        animation: rot 6s infinite linear var(--state);
}
#son {
      position: absolute;
      content: '';
      inset: 0 0 0 0;
      background: url('https://pic.imgdb.cn/item/65c3a0399f345e8d0329786c.png') no-repeat center/cover;
      -webkit-mask-image: repeating-linear-gradient(to right, #000, transparent 6px);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: 0 0;
      -webkit-mask-size: 0% 100%;
      animation: maskmove 20s ease infinite alternate var(--state);
}
#son:hover { -webkit-mask: unset; }
#ma {
        position: absolute;
        top: -200px; left:420px;
        width: 400px;
        height: 400px;
        font: bold 7.4em sans-serif;
        color: transparent;
        letter-spacing: 0.0em;
        display: flex;
        justify-content: center;
        align-items: end;
}
.txtBox {
        text-shadow: 0 0 0 rgba(2,246,242,0.6);
        animation: gone var(--du) var(--de) infinite var(--state);
}
@keyframes gone {
        60% {
                text-shadow: 0 0 120px rgba(76,169,169,.9);
                opacity: .8;
        }
        100% {
                text-shadow: 0 0 80px rgba(76,169,169,.6);
          transform: translate(-60px,-80px) rotate(-180deg) skew(20deg) scale(1.2);
                opacity: 0;
        }
}
@keyframes mov {
      to { background-position: -1200px 0; }
}
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes maskmove {
0% { -webkit-mask-size: 0 100%; }
30% { -webkit-mask-size: 0 100%; }
70% { -webkit-mask-size: 100% 100%; }
100% { -webkit-mask-size: 100% 100%; }
}
</style>

<div id="mydiv">
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/71/5b48ae2e6ad5d.mp4" loop muted></video>
<div id="ma"></div>
                <div id="son"></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1920956929" autoplay loop></audio>
       
        <img id="player" src="https://pic.imgdb.cn/item/65c44c759f345e8d039b381e.png" alt="" title="播放/暂停" />
</div>

<script>
(function() {
let strAr = '女人如水'.split('');
strAr.forEach((text,key) => {
        let span = document.createElement('span');
        span.className = 'txtBox';
        span.textContent = text;
        span.style.cssText += `
                --du: ${strAr.length * 5.4 + 1}s;
                --de: ${key * 2.2}s;
        `;
        ma.appendChild(span);
});
        let mState = () => aud.paused ? (mydiv.style.setProperty('--state', 'paused'),vid.pause()) : (mydiv.style.setProperty('--state', 'running'),vid.play());
        aud.addEventListener('playing', mState, false);
        aud.addEventListener('pause', mState, false);
        player.addEventListener('click', ()=> aud.paused ? aud.play() : aud.pause(),false);
})();
</script>

红影 发表于 2024-2-8 11:50

感谢水芙蓉美女的赠礼，回赠个小礼，不成敬意。请笑纳@醉美水芙蓉 {:4_187:}

红影 发表于 2024-2-8 11:52

我用了一个透明图做的图片遮罩，主要想让水中女子朦胧点。顺便复习了文字的烟雾效果@马黑黑
谢谢黑黑的代码{:4_187:}

红影 发表于 2024-2-8 11:53

弄了个糖果一样的按钮，感觉比较适合{:4_173:}

亦是金 发表于 2024-2-8 12:19

好帖，特效多多，欣赏学习了！{:4_187:}

马黑黑 发表于 2024-2-8 13:00

红影 发表于 2024-2-8 11:52
我用了一个透明图做的图片遮罩，主要想让水中女子朦胧点。顺便复习了文字的烟雾效果@马黑黑
谢谢黑黑的代 ...

元素模糊还有一个实现方法：filter: blur(1px); 支持浮点数

醉美水芙蓉 发表于 2024-2-8 14:36

醉美水芙蓉 发表于 2024-2-8 14:36

红影 发表于 2024-2-8 15:05

亦是金 发表于 2024-2-8 12:19
好帖，特效多多，欣赏学习了！

谢谢亦是金老师鼓励，你的帖子里用到的效果更多呢{:4_173:}

红影 发表于 2024-2-8 15:06

马黑黑 发表于 2024-2-8 13:00
元素模糊还有一个实现方法：filter: blur(1px); 支持浮点数

是的，但这个主要目的还是学习这种竖排的遮罩效果呢{:4_173:}

红影 发表于 2024-2-8 15:06

醉美水芙蓉 发表于 2024-2-8 14:36
谢谢红影美女！礼物收到！

不客气啊，应该谢谢水芙蓉美女送我的礼物才是，很开心的{:4_187:}

红影 发表于 2024-2-8 15:07

醉美水芙蓉 发表于 2024-2-8 14:36
欣赏学习红影美女精心制作的播放器！

感谢水芙蓉美女鼓励{:4_187:}

樵歌 发表于 2024-2-8 15:41

又是各种综合代码运用，美到不可方物。太赞了！

樵歌 发表于 2024-2-8 15:44

建过议，送女孩纸的应当上个蟀锅吗{:4_189:}

马黑黑 发表于 2024-2-8 17:53

红影 发表于 2024-2-8 15:06
是的，但这个主要目的还是学习这种竖排的遮罩效果呢

也可以

红影 发表于 2024-2-8 18:47

樵歌 发表于 2024-2-8 15:41
又是各种综合代码运用，美到不可方物。太赞了！

谢谢师兄鼓励{:4_187:}

红影 发表于 2024-2-8 18:48

樵歌 发表于 2024-2-8 15:44
建过议，送女孩纸的应当上个蟀锅吗

美的谁都喜欢啊，送女孩子也可以是美女的{:4_173:}

红影 发表于 2024-2-8 18:49

马黑黑 发表于 2024-2-8 17:53
也可以

开始弄错，直接上小图，结果被放大了{:4_173:}

马黑黑 发表于 2024-2-8 19:37

红影 发表于 2024-2-8 18:49
开始弄错，直接上小图，结果被放大了

也不错

红影 发表于 2024-2-8 19:46

马黑黑 发表于 2024-2-8 19:37
也不错

然后，我又多知道了点{:4_173:}

查看完整版本: 《女人如水》TO水芙蓉美女（学习黑黑遮罩效果）