Warm Light
本帖最后由 马黑黑 于 2024-9-29 07:44 编辑 <br /><br /><style>#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/web/svg/ccf.svg') no-repeat center/ 60%,url('https://638183.freep.cn/638183/t24/webp2/warmlight.webp') no-repeat center/cover; box-shadow: 0 0 6px #666; position: relative; }
#psvg { position: absolute; left: calc(50% - 100px); top: calc(50% - 100px); filter: drop-shadow(2px 2px 0 #000); animation: rot 8s cubic-bezier(0.89, 0.04, 0.24, 1.03) infinite alternate var(--state); cursor: pointer; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1456446090" autoplay loop></audio>
<svg id="psvg" width="200px" height="200px"><defs><path id="path1" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/></defs><text dx="40" dy="40" font-size="40" fill="plum" font-family="Arial"><textPath href="#path1" textLength="610">🕊️🐦⬛🐓🦢🪿🦩🐦🔥🦤🐥</textPath></text></svg>
</div>
<script>
aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
psvg.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/web/svg/ccf.svg') no-repeat center/ 60%,url('https://638183.freep.cn/638183/t24/webp2/warmlight.webp') no-repeat center/cover; box-shadow: 0 0 6px #666; position: relative; }
#psvg { position: absolute; left: calc(50% - 100px); top: calc(50% - 100px); filter: drop-shadow(2px 2px 0 #000); animation: rot 8s cubic-bezier(0.89, 0.04, 0.24, 1.03) infinite alternate var(--state); cursor: pointer; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1456446090" autoplay loop></audio>
<svg id="psvg" width="200px" height="200px"><defs><path id="path1" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/></defs><text dx="40" dy="40" font-size="40" fill="plum" font-family="Arial"><textPath href="#path1" textLength="610">🕊️🐦⬛🐓🦢🪿🦩🐦🔥🦤🐥</textPath></text></svg>
</div>
<script>
aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
psvg.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/helight/helight.js';
document.body.appendChild(sc);
</script>
本帖最后由 马黑黑 于 2024-9-29 08:04 编辑
本帖：
（一）帖子容器双背景图。第一张背景图片是.svg，除了emoji 图标其余区域透明，故而无需做 background-blend-mode 滤镜处理。原本想使用svg代码做第一个背景图，本论坛主动转义和帖子的转义不兼容——我还没找到处理方法，不成功，所以转而采用.svg图片；
（二）小播是html内嵌svg代码图片。 这个背景奇妙，非常适合使用emoji图标呢，真的相得益彰的感觉{:4_199:} 黑黑用实例诠释了讲述的emoji图标，真好{:4_199:}
https://cccimg.com/view.php/e0894c0da7b69368594ef711c9a07755.webp
谢谢老师辛苦，欣赏学习。 欣赏欣赏{:4_187:} 马黑黑 发表于 2024-9-29 07:46
帖子代码
<style>
黑黑我加分后，代码看不见了，我是手机 小辣椒 发表于 2024-9-29 19:41
黑黑我加分后，代码看不见了，我是手机
刷新 红影 发表于 2024-9-29 11:06
这个背景奇妙，非常适合使用emoji图标呢，真的相得益彰的感觉
挺漂酿的底图 红影 发表于 2024-9-29 11:06
黑黑用实例诠释了讲述的emoji图标，真好
论坛的编码， charset=gbk，非常不符合时代的要求，使用 emoji 文本图标会出现很多问题 世外桃源 发表于 2024-9-29 12:20
欣赏欣赏
{:4_190:} 起个网名好难 发表于 2024-9-29 11:11
{:4_180:} 梦江南 发表于 2024-9-29 11:49
谢谢老师辛苦，欣赏学习。
{:4_190:} 醉美水芙蓉 发表于 2024-9-29 21:08
黑黑老师神速！播放器漂亮！
谢谢 马黑黑 发表于 2024-9-29 19:59
挺漂酿的底图
仿佛天生地设适合emoji 图标{:4_173:} 马黑黑 发表于 2024-9-29 20:00
论坛的编码， charset=gbk，非常不符合时代的要求，使用 emoji 文本图标会出现很多问题
这个我不懂啊，大概论坛框架的需要吧。 红影 发表于 2024-9-29 22:35
这个我不懂啊，大概论坛框架的需要吧。
这个是可以定义的。但是现在改对过去的部分帖子会有影响