Warm Light

马黑黑

马黑黑

帖子代码

<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>

马黑黑

本帖：

（一）帖子容器双背景图。第一张背景图片是.svg，除了emoji 图标其余区域透明，故而无需做 background-blend-mode 滤镜处理。原本想使用svg代码做第一个背景图，本论坛主动转义和帖子的转义不兼容——我还没找到处理方法，不成功，所以转而采用.svg图片；

（二）小播是html内嵌svg代码图片。

红影

这个背景奇妙，非常适合使用emoji图标呢，真的相得益彰的感觉

红影

黑黑用实例诠释了讲述的emoji图标，真好

起个网名好难

                               
登录/注册后可看大图

梦江南

谢谢老师辛苦，欣赏学习。

世外桃源

欣赏欣赏

小辣椒

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

马黑黑

起个网名好难 发表于 2024-9-29 11:11

马黑黑

梦江南 发表于 2024-9-29 11:49
谢谢老师辛苦，欣赏学习。

马黑黑

醉美水芙蓉 发表于 2024-9-29 21:08
黑黑老师神速！播放器漂亮！

谢谢

红影

马黑黑 发表于 2024-9-29 19:59
挺漂酿的底图

仿佛天生地设适合emoji 图标

红影

马黑黑 发表于 2024-9-29 20:00
论坛的编码， charset=gbk，非常不符合时代的要求，使用 emoji 文本图标会出现很多问题

这个我不懂啊，大概论坛框架的需要吧。

马黑黑

红影 发表于 2024-9-29 22:35
这个我不懂啊，大概论坛框架的需要吧。

这个是可以定义的。但是现在改对过去的部分帖子会有影响