论坛 › 马黑黑教程专版 › 冰河：测试mix-blend-mode

马黑黑 发表于 2022-9-2 12:35

冰河：测试mix-blend-mode

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('/data/attachment/forum/202209/02/065401ejiwmso2m2oag1ci.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 10px; right: 10px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; z-index: 9; }
#btnwrap { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #ccc linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); cursor: pointer; }
#btnwrap:hover { background: #000 linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); }
#btnplay { width: 20px; height: 20px; background: #ccc; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { width: 300px; height: 2px; background: #ccc linear-gradient(to right,red,orange,green,tomato) no-repeat; background-size: 1px 2px; cursor: pointer; position: relative;}
#prog::before { position: absolute; content: ''; top: -7px; width: inherit; height: 15px; }
#prog:hover::before { background: rgba(0,200,200,.15); }
#tmsg { font: normal 16px sans-serif; color: lightblue;}
#lrc { position: absolute; left: 10px; bottom: 10px; font: bold 1.5em sans-serif; color: lightblue; text-shadow: 1px 1px 2px #000; text-align: center; }
#lrc:hover, #tmsg:hover { color: snow; }
#vid { position: absolute; width: 1024px; height: 695px; top: -55px; object-fit: cover; mix-blend-mode: screen; }
</style>

<div id="papa">
        <video id="vid" src="https://img.tukuppt.com/video_show/2422006/00/03/03/5ba38e0f3bdba.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
        <div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
        <div id="lrc">lrc歌词</div>
</div>

<script>
let lrcAr = [
        ['0.00','纯音乐 - 冰河'],
        ['160.00','感谢支持']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1295445124.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
        prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 2px';
        tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
        }
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
        if (!val) return '00:00';
        val = Math.floor(val);
        let min = parseInt(val / 60), sec = parseFloat(val % 60);
        if(min < 10) min = '0' + min;
        if(sec < 10) sec = '0' + sec;
        return min + ':' + sec;
}
</script>

马黑黑 发表于 2022-9-2 12:42

用

mix-blend-mode: screen;

替代

opacity: .25;

似乎烟雾的效果更加浓艳。

screen 的公式很复杂，直观的特征是，黑色跟外围的任何颜色，得外围颜色；白色跟外围的颜色得白色；其他颜色跟外围的颜色，外围颜色变浅，有漂白效果。

马黑黑 发表于 2022-9-2 12:44

老旧浏览器对 mix-blend-mode 的支持 和对 opacity 的支持程度一样，都不太好。建议手机端的浏览器使用较新版本的基于Chrome或Firefox所采用的内核的浏览器。

加林森 发表于 2022-9-2 13:13

来学习！这个效果感觉更加好了哦。

马黑黑 发表于 2022-9-2 13:15

加林森 发表于 2022-9-2 13:13
来学习！这个效果感觉更加好了哦。

嗯，有点区别

加林森 发表于 2022-9-2 13:27

马黑黑 发表于 2022-9-2 13:15
嗯，有点区别
是的。背景更加清晰了。但是，还是要根据自己的帖子去修改才行。对不？

马黑黑 发表于 2022-9-2 13:33

加林森 发表于 2022-9-2 13:27
是的。背景更加清晰了。但是，还是要根据自己的帖子去修改才行。对不？

主要是根据使用了 mix-blend-mode 滤镜的对象

加林森 发表于 2022-9-2 13:46

马黑黑 发表于 2022-9-2 13:33
主要是根据使用了 mix-blend-mode 滤镜的对象

嗯嗯，明白了。

红影 发表于 2022-9-2 14:10

是的，滤镜用得合适的时候，比透明度的效果要好很多呢{:4_187:}

马黑黑 发表于 2022-9-2 19:41

红影 发表于 2022-9-2 14:10
是的，滤镜用得合适的时候，比透明度的效果要好很多呢

一切看情况，比如背景呀构图规律呀什么的

红影 发表于 2022-9-3 15:31

马黑黑 发表于 2022-9-2 19:41
一切看情况，比如背景呀构图规律呀什么的

是的，但是滤镜有很多种可选的呀，必有一款能适合。

马黑黑 发表于 2022-9-3 22:41

红影 发表于 2022-9-3 15:31
是的，但是滤镜有很多种可选的呀，必有一款能适合。

明白原理的就好选择，否则得一个一个试

红影 发表于 2022-9-3 22:52

马黑黑 发表于 2022-9-3 22:41
明白原理的就好选择，否则得一个一个试

多试几次也是好事，试的过程中就会越来越熟悉。

马黑黑 发表于 2022-9-3 22:54

红影 发表于 2022-9-3 22:52
多试几次也是好事，试的过程中就会越来越熟悉。

对，这也是一种积累方式

红影 发表于 2022-9-4 13:53

马黑黑 发表于 2022-9-3 22:54
对，这也是一种积累方式

比较低效率的学习方法，但也会有收获{:4_173:}

马黑黑 发表于 2022-9-4 19:46

红影 发表于 2022-9-4 13:53
比较低效率的学习方法，但也会有收获

多少都有点的

红影 发表于 2022-9-4 22:29

马黑黑 发表于 2022-9-4 19:46
多少都有点的

而且自己试验过的效果更直观，比值看文字介绍的印象更深刻。

马黑黑 发表于 2022-9-4 22:51

红影 发表于 2022-9-4 22:29
而且自己试验过的效果更直观，比值看文字介绍的印象更深刻。

那是的，必须动手

红影 发表于 2022-9-4 23:11

马黑黑 发表于 2022-9-4 22:51
那是的，必须动手

我去试过的，你讲述这个知识点的时候{:4_173:}

马黑黑 发表于 2022-9-4 23:12

红影 发表于 2022-9-4 23:11
我去试过的，你讲述这个知识点的时候

但是还是记不牢

查看完整版本: 冰河：测试mix-blend-mode