游魂飞魄

马黑黑

马黑黑

帖子代码

<style>
#mydiv {
	margin: 130px 0 30px calc(50% - 721px);
	width: 1280px;
	height: 720px;
	background: url('https://638183.freep.cn/638183/t24/3/yhfp.jpg') no-repeat center/cover;
	box-shadow: 0 0 8px rgba(0,0,0,.6);
	z-index: 1;
	pointer-events: none;
	display: grid;
	place-items: center;
	position: relative;
}
#mydiv::before, #mydiv::after {
	position: absolute;
	content: '';
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: lightblue radial-gradient(teal 4px, transparent 0) center / 12px 8px;
	mask: radial-gradient(circle, red 10%, rgba(0,0,0,.25) 80%, red 0);
	box-shadow: inset 0 0 4px teal;
	pointer-events: auto;
	cursor: pointer;
	animation: bgchg 18s infinite alternate var(--state), rot 18s linear infinite var(--state);
}
#mydiv::after { right: 260px; top: 80px; animation-delay: -10s; }
@keyframes bgchg { to { background-size: 48px 24px; filter: hue-rotate(360deg); } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1947445277" autoplay loop></audio>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', ['running', 'paused'][+aud.paused]);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑

本帖：

两个小播用帖子容器自身的伪元素 ::before 和 ::after 做成，利用渐变背景和遮罩技术制作出UI，辅之以两个关键帧动画，营造神秘莫测的符合帖子音乐主题的氛围。

梦江南

问好黑黑老师，欣赏点赞！

梦江南

这帖子的气氛是有点阴冷冷的。

红影

很能衬托气氛呢。下班了，先欣赏帖子，到家再细细学习代码

马黑黑

红影 发表于 2024-7-19 17:03
很能衬托气氛呢。下班了，先欣赏帖子，到家再细细学习代码

马黑黑

梦江南 发表于 2024-7-19 15:02
这帖子的气氛是有点阴冷冷的。

马黑黑

梦江南 发表于 2024-7-19 15:00
问好黑黑老师，欣赏点赞！

南无月

游魂飞魄，果然是一曲轻音乐～万圣节主题的，从未听过～不恐怖，很新奇～

南无月

马黑黑 发表于 2024-7-19 13:18
本帖：

两个小播用帖子容器自身的伪元素 ::before 和 ::after 做成，利用渐变背景和遮罩技术制作出UI， ...

盲猜还是不靠谱，终于看到代码～
背景小点点有尺寸变动，还有色相变化～
球体有径向渐变营造立体效果～
还有整体旋转，几个因素合在一起～
纯代码绘制效果，创意超赞

红影

小点点的依次聚拢散开好奇妙，而且会变色的，还带着立体感。这样的小播真漂亮

红影

原来background-size小，点点就多，否则点点就少，聚拢和散开竟是这样来的呢，这构思真巧妙

马黑黑

红影 发表于 2024-7-19 19:33
原来background-size小，点点就多，否则点点就少，聚拢和散开竟是这样来的呢，这构思真巧妙

马黑黑

南无月 发表于 2024-7-19 19:11
盲猜还是不靠谱，终于看到代码～
背景小点点有尺寸变动，还有色相变化～
球体有径向渐变营造立体效果～ ...

晚上超嚎

小辣椒

啊~~~打开界面有点怕怕的

红影

马黑黑 发表于 2024-7-19 20:33

盯着看了半天，这个很奇妙

小辣椒

电脑预览了一下  before  fter的效果可以做出这个奇特的效果

小辣椒

这个帖没有加视频的

马黑黑

小辣椒 发表于 2024-7-19 20:52
这个帖没有加视频的

可加可不加，看需要