星辰大海（混合滤镜效果演示）

马黑黑 · 发表于 2022-4-12 13:29

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-4-12 13:43 编辑

黄霄雲 - 星辰大海

马黑黑 · 发表于 2022-4-12 13:33

用到的图片均以 img 标签呈现：

马黑黑 · 发表于 2022-4-12 13:35

本帖最后由马黑黑于 2022-4-12 18:07 编辑

第二张图浮于第一张图上方，滤镜及透明度如下：

mix-blend-mode: multiply;
opacity: .3;

标题文本所用滤镜：

mix-blend-mode: exclusion;

马黑黑 · 发表于 2022-4-12 13:35

帖子全部代码：

<style>
.bgDiv { margin: auto; width: 1024px; height: 844px; position: relative; }
.bgDiv img { position: absolute; width: 100%; height: 100%; }
.bgDiv img:nth-child(2) {mix-blend-mode: multiply; opacity: .3; }
.bgDiv p { position: absolute; left: 80px; mix-blend-mode: exclusion; color: white; font: 900 2.5em / 1em Sans-serif; text-align: center; text-shadow: 2px 2px 4px #333; }
.circle {
width: 100px; height: 100px;
background: conic-gradient(#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
border-radius: 50%; cursor: pointer; top: 50%; left: 50%;
position: absolute;
mask: radial-gradient(transparent 40px, #000 40px);
-webkit-mask: radial-gradient(transparent 40px, #000 40px);
animation: roll 4s linear infinite;
}
@keyframes roll { to {transform: rotate(360deg); } }
</style>
<div class="bgDiv">
<img src="/data/attachment/forum/202204/12/132706z1lgvzviigv6c1t6.jpg" alt="" />
<img src="/data/attachment/forum/202204/12/132706xe6cvvtju8jgcz86.jpg" alt="" />
<div class="circle"></div>
<p>黄霄雲 - 星辰大海</p>
</div>
<script>
let au = document.createElement("audio");
au.src = "http://www.kumeiwp.com/sub/filestores/2021/01/26/dbaf800fd0e3e792814e9781d1fac5de.mp3";
au.autoplay = true;
document.querySelector(".bgDiv").appendChild(au);
document.querySelector(".circle").onclick = function() {
au.paused ? (au.play(), this.style.animationPlayState = 'running') : (au.pause(), this.style.animationPlayState = 'paused');
}
</script>