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

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

本帖最后由 马黑黑 于 2022-4-12 13:43 编辑 <br /><br /><style>
.bgDiv { margin: auto; left: -214px; width: 1024px; height: 844px; position: relative; }
.bgDiv img { position: absolute; width: 100%; height: 100%;}
.bgDiv img:nth-child(2) {mix-blend-mode: multiply; opacity: .4; }
.bgDiv p { position: absolute; padding: 20px; 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; bottom: 130px; left: 20px;
        position: absolute; opacity: .6;
        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>

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

<p>用到的图片均以 img 标签呈现：<br><br></p>

<img style="width: 760px;" src="/data/attachment/forum/202204/12/132706z1lgvzviigv6c1t6.jpg" alt=""><br><br>
<img style="width: 760px;" src="/data/attachment/forum/202204/12/132706xe6cvvtju8jgcz86.jpg" alt="">

马黑黑 发表于 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>

加林森 发表于 2022-4-12 16:49

老黑的这个制作真漂亮。使用两张不同的图片，通过滤镜达到的效果真美。{:4_199:}

马黑黑 发表于 2022-4-12 18:10

加林森 发表于 2022-4-12 16:49
老黑的这个制作真漂亮。使用两张不同的图片，通过滤镜达到的效果真美。

总体上实现原理是简单的：

图片与父元素中定位从而叠加在一起，并令图片大小一致（为此两张图片的尺寸差距不要太大），然后在浮于上方的图片使用滤镜并根据效果决定是否增加透明度、增加多少。

加林森 发表于 2022-4-12 18:12

马黑黑 发表于 2022-4-12 18:10
总体上实现原理是简单的：

图片与父元素中定位从而叠加在一起，并令图片大小一致（为此两张图片的尺寸 ...

嗯嗯，辛苦你了。{:4_190:}

马黑黑 发表于 2022-4-12 18:14

加林森 发表于 2022-4-12 18:12
嗯嗯，辛苦你了。

播放器按钮可以用其他的东东

加林森 发表于 2022-4-12 18:18

马黑黑 发表于 2022-4-12 18:14
播放器按钮可以用其他的东东

明白的。

马黑黑 发表于 2022-4-12 18:24

加林森 发表于 2022-4-12 18:18
明白的。

意思是要有所变化

加林森 发表于 2022-4-12 18:26

马黑黑 发表于 2022-4-12 18:24
意思是要有所变化

嗯嗯，我这里的播放器比较多，咱们换着玩。

马黑黑 发表于 2022-4-12 19:40

加林森 发表于 2022-4-12 18:26
嗯嗯，我这里的播放器比较多，咱们换着玩。

{:5_108:}

红影 发表于 2022-4-12 19:50

这个圆环播放器还是第一次看到，很漂亮{:4_187:}

红影 发表于 2022-4-12 19:54

用IMG添加图片，超出论坛框的父框定位可以直接用margin: auto，真方便。
用滤镜弄出的图片叠加真漂亮，有神奇的效果呢{:4_187:}

马黑黑 发表于 2022-4-12 20:21

红影 发表于 2022-4-12 19:50
这个圆环播放器还是第一次看到，很漂亮

不会吧？这是类似于 loading 的图标{:5_106:}

马黑黑 发表于 2022-4-12 20:24

红影 发表于 2022-4-12 19:54
用IMG添加图片，超出论坛框的父框定位可以直接用margin: auto，真方便。
用滤镜弄出的图片叠加真漂亮，有 ...

margin:auto是本地测试时用的，论坛里还需定位。那是针对外框的设定，不是图片。

加林森 发表于 2022-4-12 20:48

马黑黑 发表于 2022-4-12 19:40


你也发出来这么多的播放器，真好！{:5_108:}

马黑黑 发表于 2022-4-13 06:50

加林森 发表于 2022-4-12 20:48
你也发出来这么多的播放器，真好！

还行

加林森 发表于 2022-4-13 11:38

马黑黑 发表于 2022-4-13 06:50
还行

嗯嗯，我都收藏了。

马黑黑 发表于 2022-4-13 12:04

加林森 发表于 2022-4-13 11:38
嗯嗯，我都收藏了。

收藏辛苦
页: [1] 2 3
查看完整版本: 星辰大海（混合滤镜效果演示）