一生所爱

马黑黑

马黑黑

帖子代码

<style>
#papa {
	--width: 1024px;
	margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
	width: var(--width);
	height: 630px;
	background: url('https://638183.freep.cn/638183/t24/3/yiugsoai.jpg') no-repeat center/cover;
	box-shadow: inset 0 -3rem 3rem rgba(0,0,0,0.1), 0 0 0 2px rgb(20,20,20), 0.3rem 0.3em 1rem rgba(0,0,0,0.6);
	position: relative;
	display: grid;
	place-items: center;
	pointer-events: none;
}
#papa::before, #papa::after {
	position: absolute;
	content: '';
	width: 400px;
	height: 400px;
	background: radial-gradient(circle at center center, transparent 60%, rgba(0,60,128,.8) 60%) 0/40px 40px;
	border-radius: 50%;
	cursor: pointer;
	pointer-events: auto;
	animation: rot 4s var(--delay) linear infinite alternate var(--state);
	--delay: 0s;
}
#papa::after { --delay: -3s; }
@keyframes rot { to { transform: rotate(10turn); } }
</style>

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

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

马黑黑

本帖：

音频播放控制器是 #papa::before、#papa::after 两个伪元素拼凑而成，它们既是小播，也是帖子的装饰——帖子唯一的动态效果就它俩。

两个伪元素重叠在一起，预设是在一个关键帧动画运行周期里面旋转10圈、双向（alternate），::after 提前3秒运行动画以便令组合的运动形态有一定的错落效果。伪元素的渐变背景极简，可以改变两个百分比数字营造更多的效果，背景尺寸（40px 40px）修改后同样能产生不一样的图案。

下面给出另一个背景渐变示例：

#player {
	position: absolute;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle at center center, transparent 90%, rgba(0,60,128,.5) 95%) 0/80px 80px;
	border-radius: 50%;
}

马黑黑

另外，帖子整体有浮于页面的效果，这是 box-shadow 阴影效果，用了三个阴影组合：一个内阴影、两个外阴影（代码第8行）

南无月

我来瞧一眼代码的
原来根本没有视频，居然整出视频的动态效果。。

南无月

-3rem 3rem这个是个新的尺寸单位。好象见过又有点眼生

南无月

马黑黑 发表于 2024-7-15 07:59
本帖：

音频播放控制器是 #papa::before、#papa::after 两个伪元素拼凑而成，它们既是小播，也是帖子的 ...

这个小播很新颖，自己挖了个图转动起来，效果跟视频一样灵动，太赞了

南无月

马黑黑 发表于 2024-7-15 08:20
另外，帖子整体有浮于页面的效果，这是 box-shadow 阴影效果，用了三个阴影组合：一个内阴影、两个外阴影（ ...

有光影就有立体感，这个阴影设置相当细致

梦油

画面给人一种十分欢快的感觉。代码真神奇。

马黑黑

南无月 发表于 2024-7-15 08:23
-3rem 3rem这个是个新的尺寸单位。好象见过又有点眼生

rem 是一个相对长度单位，它相对于根元素即HTML标签的字体大小（font-size）而决定 rem 的大小。比方说，页面根元素设置字体大小为 16px，那么，1rem = 16px，就这么简单。

页面是有默认字体大小的，所以，即使没有设置 font-size，它也会有一个固定值，16px

马黑黑

南无月 发表于 2024-7-15 08:30
有光影就有立体感，这个阴影设置相当细致

这是比较专业的盒子阴影

马黑黑

南无月 发表于 2024-7-15 08:22
我来瞧一眼代码的
原来根本没有视频，居然整出视频的动态效果。。

梦江南

神奇！碰一中间就会逆向旋转了。

红影

神奇的效果，和底图的构成如此协调，又营造出一种跳脱的氛围，很赞

红影

又是一个纯代码效果呢

红影

感觉有一个伪元素是不动的，去试验了一下，把--delay: 0;变成--delay: 0s;两个才都动了。
0后面记得不用加单位啊

红影

马黑黑 发表于 2024-7-15 07:59
本帖最后由 马黑黑 于 2024-7-15 10:16 编辑 本帖：音频播放控制器是 #papa::before、#papa::after 两个伪 ...

这个也好玩，变成了一个个小方块，和前面一个的效果完全不同呢

马黑黑

红影 发表于 2024-7-15 18:50
这个也好玩，变成了一个个小方块，和前面一个的效果完全不同呢

对的。渐变颜色的起始会影响最终形状

马黑黑

梦江南 发表于 2024-7-15 14:36
神奇！碰一中间就会逆向旋转了。

没辣么神奇吧