论坛 › 欢乐水吧 › 谭盾 - 苍：序曲

马黑黑 发表于 2024-7-22 12:33

谭盾 - 苍：序曲

<style>
#papa {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t24/e1e.jpg') no-repeat center/cover;
        box-shadow: 0 0 8px rgba(0,0,0,.6);
        pointer-events: none;
        z-index: 1;
        position: relative;
}
#papa::before, #papa::after { position: absolute; content: ''; }
#papa::before {
        width: 900px;
        height: 640px;
        right: 0;
        background: url('https://638183.freep.cn/638183/t24/e2e.jpg') no-repeat center/cover;
        -webkit-mask: linear-gradient(110deg, transparent, red);
}
#papa::after {
        left: 40%;
        bottom: 45%;
        content: url('https://638183.freep.cn/638183/small/hxxb.webp');
        cursor: pointer;
        pointer-events: auto;
        mix-blend-mode: color-burn;
        animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>


<div id="papa" title="播放/暂停">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=154377" autoplay loop></audio>
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', ['running','paused'][+aud.paused]);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-7-22 12:34

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#papa {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t24/e1e.jpg') no-repeat center/cover;
        box-shadow: 0 0 8px rgba(0,0,0,.6);
        pointer-events: none;
        z-index: 1;
        position: relative;
}
#papa::before, #papa::after { position: absolute; content: ''; }
#papa::before {
        width: 900px;
        height: 640px;
        right: 0;
        background: url('https://638183.freep.cn/638183/t24/e2e.jpg') no-repeat center/cover;
        -webkit-mask: linear-gradient(110deg, transparent, red);
}
#papa::after {
        left: 40%;
        bottom: 45%;
        content: url('https://638183.freep.cn/638183/small/hxxb.webp');
        cursor: pointer;
        pointer-events: auto;
        mix-blend-mode: color-burn;
        animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(1turn); } }
&lt;/style&gt;


&lt;div id="papa" title="播放/暂停"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=154377" autoplay loop&gt;&lt;/audio&gt;
&lt;/div&gt;

&lt;script&gt;
aud.oncanplay = aud.onplaying = aud.onpause = () =&gt; papa.style.setProperty('--state', ['running','paused'][+aud.paused]);
papa.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-7-22 12:39

本帖：

（一）主元素背景图片和伪元素 ::before 背景图片右对齐重叠，伪元素通过 mask 遮罩将其背景图片融入主元素背景图片中，此法相当于PS的蒙版手法。

mask 可以使用各种渐变实现，色彩位置、遮罩角度等等可能存在的参数均可细调，可根据需要而定。

（二）小播晶莹剔透的效果实现手法很简单，仅一个融合滤镜，代码在26行。

梦江南 发表于 2024-7-22 13:04

简短的代码做出漂亮的图图，真佩服！{:4_187:}

愤怒的葡萄 发表于 2024-7-22 13:31

非常漂亮的音画作品。

海笑 发表于 2024-7-22 13:55

欣赏老师佳作！

南无月 发表于 2024-7-22 14:33

马黑黑 发表于 2024-7-22 12:39
本帖：

（一）主元素背景图片和伪元素 ::before 背景图片右对齐重叠，伪元素通过 mask 遮罩将其背景图片 ...

mask 可以使用各种渐变实现。。
这个又是个新思路，昨天是用SVG图片遮罩，今天变成渐变了，三种渐变都适用，那效果会更自然柔和。
-webkit-mask: url
-webkit-mask: linear-gradient

南无月 发表于 2024-7-22 14:34

马黑黑 发表于 2024-7-22 12:39
本帖：

（一）主元素背景图片和伪元素 ::before 背景图片右对齐重叠，伪元素通过 mask 遮罩将其背景图片 ...

小播看出来是个颜色加深滤镜进行背景融合，红宝石一样透明的材质，质感很强。{:4_199:}

南无月 发表于 2024-7-22 14:38

白老师的思路创意每次都令人眼前一亮，豁然开朗。。
此贴效果一流。。{:4_173:}
音乐好听，每天都能赏到不同乐曲，实属一大乐事

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

这个好奇特，用遮罩，伪元素的图片不用设置透明或融合，就能让背景图片显示出来，而且是逐渐过渡显示的，让交接地方毫无痕迹。黑黑伪元素图片特意用的比较小的图图，也是为了说明这点吧{:4_187:}

红影 发表于 2024-7-22 19:39

-webkit-mask: linear-gradient(110deg, transparent, red);
这个里面的红色无论是什么颜色都一样吧，因为在使用遮罩时颜色的存在的地方就变透明了{:4_204:}

红影 发表于 2024-7-22 19:39

每天都有新东西学习，真的太好了{:4_199:}

红影 发表于 2024-7-22 19:42

小播竟然能变成这样的效果，真没想到{:4_173:}

辫子哥哥 发表于 2024-7-22 19:55

感觉小女孩坐在水里

马黑黑 发表于 2024-7-22 21:05

辫子哥哥 发表于 2024-7-22 19:55
感觉小女孩坐在水里

凉快

马黑黑 发表于 2024-7-22 21:07

红影 发表于 2024-7-22 19:39
-webkit-mask: linear-gradient(110deg, transparent, red);
这个里面的红色无论是什么颜色都一样吧，因为 ...

mask的原理再强调一下：遮罩体透明的，其下源图像不显示，反之，任意不（全）透明的，其下源图像（部分）显示。

醉美水芙蓉 发表于 2024-7-22 21:20

马黑黑 发表于 2024-7-22 21:22

醉美水芙蓉 发表于 2024-7-22 21:20
老师的代码神奇！竟能做出PS图图融合效果！

{:4_190:}

马黑黑 发表于 2024-7-22 21:23

南无月 发表于 2024-7-22 14:38
白老师的思路创意每次都令人眼前一亮，豁然开朗。。
此贴效果一流。。
音乐好听，每天都能赏到 ...

{:4_180:}

南无月 发表于 2024-7-22 22:37

马黑黑 发表于 2024-7-22 21:23

{:4_199:}已跟了一贴，把线性渐变换成径向渐变，效果一样惊艳

查看完整版本: 谭盾 - 苍：序曲