太极
<style>#mydiv {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background:
url('https://638183.freep.cn/638183/small/sunbirds.jpg') no-repeat 990px 80px,
url('https://638183.freep.cn/638183/t24/webp/tdji_2.webp') no-repeat,
url('https://638183.freep.cn/638183/t24/4/tdji_1.jpeg') no-repeat 0/cover,
rgba(0,128,128,.25);
background-blend-mode: darken, normal, darken;
box-shadow: 0 0 8px rgba(0,0,0,.5);
z-index: 1;
pointer-events: none;
position: relative;
}
#mydiv::before, #mydiv::after {
content: '';
position: absolute;
background: url('https://638183.freep.cn/638183/small/tdji.jpg') no-repeat center/cover;
filter: drop-shadow(0 0 20px snow);
border-radius: 50%;
animation: rot 10s linear infinite var(--state);
transition: .75s;
cursor: pointer;
pointer-events: auto;
}
#mydiv::before {
width: 300px;
height: 300px;
right: 60px;
top: 60px;
mix-blend-mode: multiply;
}
#mydiv::after {
width: 120px;
height: 120px;
left: 20px;
top: 20px;
}
#mydiv:hover::before, #mydiv:hover::after {
filter: drop-shadow(0 0 80px teal);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35437599" autoplay loop></audio>
</div>
<script>
var mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#mydiv {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background:
url('https://638183.freep.cn/638183/small/sunbirds.jpg') no-repeat 990px 80px,
url('https://638183.freep.cn/638183/t24/webp/tdji_2.webp') no-repeat,
url('https://638183.freep.cn/638183/t24/4/tdji_1.jpeg') no-repeat 0/cover,
rgba(0,128,128,.25);
background-blend-mode: darken, normal, darken;
box-shadow: 0 0 8px rgba(0,0,0,.5);
z-index: 1;
pointer-events: none;
position: relative;
}
#mydiv::before, #mydiv::after {
content: '';
position: absolute;
background: url('https://638183.freep.cn/638183/small/tdji.jpg') no-repeat center/cover;
filter: drop-shadow(0 0 20px snow);
border-radius: 50%;
animation: rot 10s linear infinite var(--state);
transition: .75s;
cursor: pointer;
pointer-events: auto;
}
#mydiv::before {
width: 300px;
height: 300px;
right: 60px;
top: 60px;
mix-blend-mode: multiply;
}
#mydiv::after {
width: 120px;
height: 120px;
left: 20px;
top: 20px;
}
#mydiv:hover::before, #mydiv:hover::after {
filter: drop-shadow(0 0 80px teal);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35437599" autoplay loop></audio>
</div>
<script>
var mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</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> 本帖：演示多重背景的应用 + 伪元素做播放器
帖子容器选择器 #mydiv 使用了三个背景图像：外国姑凉，太极剑名家表演，太阳仙鹤，外加一个 rgba 颜色用于提升颜色融合的表现力。
背景图像有叠加现象时，代码中最先出现的背景图像设置处于最上层，后出现的在其下，存在色彩覆盖情况。因此，处理方法之一是背景图像融合，本帖采用此法。
background-blend-mode 属性支持设置多个图像的融合滤镜，各滤镜对应代码中按顺序出现的背景图像，滤镜值之间有小角逗号隔开。滤镜有一个补全规则：滤镜数少于背景图像数时，从头循环滤镜。举例说明：多背景图像只设置一个滤镜，则所有的图像使用相同的滤镜；若有甲乙丙丁四个图像背景但只有三个滤镜值ABC，那么，甲乙丙使用ABC滤镜，丁使用A滤镜。
帖子容器的两个伪元素做小播使用已经不止一次，因最近的小白音画帖讲义介绍到了伪元素，所以顺势做一个演示。这个需要帖子容器选择器和其伪元素选择器的一些配套：pointer-events（设备指针事件） 属性设置为 none，这样帖子容器不接受点击操作；伪元素 pointer-events 属性设置为 auto，这样，伪元素接受设备指针点击交互。 仔细看看这个结构。。
三张背景图片，用滤镜融合在一起。。飞鹤，外国人，太极人。
滤镜顺序是变暗，正常，变暗。。。（代码默认一一对应，也很神）
还有一个背景色rgba(0,128,128,.25);透明度25.. 伪小播是两张太极图，转动时有一种神秘的力量。。。
周围有光晕，鼠标触碰光晕会变色。。更仙了{:4_173:} 音乐中式的~~力量之美运动之美和道法之仙合在一起。。和谐。。 神了！谢谢老师辛苦！{:4_187:} “代码中最先出现的背景图像设置处于最上层，后出现的在其下，存在色彩覆盖情况。”
css里的和html的正好相反，记得后者是最先出现的在下层{:4_173:} background-blend-mode 属性支持设置多个图像的融合滤镜，滤镜数少于背景图像数时，从头循环滤镜。
这个补全方式还不知道呢，赶紧记一下{:4_187:} 这个帖子里的背景图像融合和伪元素小播特别神奇，尤其伪元素小播，两个伪元素的处理方式不同，可以很直观地在帖子里对比处理效果，尤其右边小播的处理，一下子把不透明的图图变成透明的了{:4_187:} 这个帖子里的需要学习的内容不少，感谢黑黑带来的好帖{:4_199:} 哇塞，好玄乎了，太极八卦来了{:4_178:} 仔细看了代码，需要恶补的，否则这个自己做不出来 小辣椒 发表于 2024-8-8 22:37
仔细看了代码，需要恶补的，否则这个自己做不出来
原理在小白教程里 马黑黑 发表于 2024-8-8 23:05
原理在小白教程里
好的，我做之前去看看，现在看做就忘记了{:4_170:} 小辣椒 发表于 2024-8-8 23:21
好的，我做之前去看看，现在看做就忘记了
不是做之前去看看，是，如果可以，那个教程要过一遍，否则你将总是瞎蒙。 马黑黑 发表于 2024-8-9 07:44
不是做之前去看看，是，如果可以，那个教程要过一遍，否则你将总是瞎蒙。
是那边每个教程都要看吧，那就是系统学习一遍了，这个要抽时间了才行 小辣椒 发表于 2024-8-9 20:20
是那边每个教程都要看吧，那就是系统学习一遍了，这个要抽时间了才行
我说的是小白教程。它将是做音画帖比较入门级别的一个讲义，弄懂每一讲的内容就像点点关注不迷路一样的效果 马黑黑 发表于 2024-8-9 20:27
我说的是小白教程。它将是做音画帖比较入门级别的一个讲义，弄懂每一讲的内容就像点点关注不迷路一样的效 ...
好的，后面有时间就去看看，已经看了前面几个教程了 小辣椒 发表于 2024-8-9 20:29
好的，后面有时间就去看看，已经看了前面几个教程了
这个教程还没写完，跟进进度也没有什么要求
页:
[1]