源

马黑黑

马黑黑

<style>
#mydiv {
	margin: 130px 0 30px calc(50% - 593px);
	width: 1024px;
	height: 640px;
	background: url('https://638183.freep.cn/638183/t24/3/origin.jpg') no-repeat center/cover;
	box-shadow: 0 0 6px rgba(0,0,0,.6);
	overflow: hidden;
	z-index: 1;
	display: grid;
	place-items: center;
	position: relative;
}
#mydiv::before {
	position: absolute;
	content: '';
	inset: -100px;
	background: repeating-conic-gradient(at 50px 50px , transparent 0%, rgba(0,255,255,.25) 4%, transparent 8%);
	transform-origin: 50px 50px;
	animation: swear 5s infinite alternate var(--state);
}
#player {
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 12px double rgba(55,144,177,.7);
	cursor: pointer;
	animation: rot 12s linear infinite var(--state);
}
#player::before, #player::after {
	position: absolute;
	content: '';
	border-radius: inherit;
	border: inherit;
}
#player::before {
	inset: 12px;
	border-style: double solid;
	border-color: rgba(68,205,241,.65);
}
#player::after { inset: 48px; border-style: dotted; }
li-zi {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: inset 0 0 10px lightblue;
	animation: up 4s linear infinite var(--state);
}
@keyframes swear {
	from { transform: rotate(-6deg); }
	to { transform: rotate(6deg); }
}
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes up {
	to { transform: translateY(var(--yy)); opacity: 0; }
}
</style>

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

<script>
Array.from({length: 60}).forEach(i => {
	i = document.createElement('li-zi');
	i.style.cssText += `
		left: ${50 + Math.floor(Math.random() * 100)}px;
		top: 95px;
		background: #${Math.random().toString(16).substring(2,8)};
		animation-delay: -${Math.random() * 4}s;
		--yy: ${500 * [1,-1][Math.round(Math.random())]}px;
	`;
	player.appendChild(i);
});
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑

本帖：

（一）使用帖子容器伪元素 ::before 实现光影；
（二）小播利用 border* 属性营造容器与两个伪元素的样式，让它们在外观上层层嵌套；
（三）li-zi 选择器对标的自定义HTML标签追加到 id="player" 即小播容器中，它们的关键帧动画使用 transform 的 translateY 实现位移，位移方向随机取正负距离（代码74行）。

马黑黑

li-zi 标签作为 player 的子元素，它们本来做上下位移运动，但 player 元素在旋转中，整体动态效果就是帖子呈现的那样了

南无月

马黑黑 发表于 2024-7-27 19:17
本帖：

（一）使用帖子容器伪元素 ::before 实现光影；

盲猜完来看说明，原来我的问题 这里都有解答

place-items: center;父元素里有这个，没见过。。
原来光线不是视频是代码写的锥形渐变。。
transform-origin: 50px 50px;但这句又是新的。。不认识

南无月

马黑黑 发表于 2024-7-27 19:20
li-zi 标签作为 player 的子元素，它们本来做上下位移运动，但 player 元素在旋转中，整体动态效果就是帖子 ...

还是子元素继承父元素的特性。。
所以除了直线跑动之外，就跟着小播一起转了

li-zi 这个标签前面既无#也无.，跟着谁就是谁家的这样理解可以么。

南无月

马黑黑 发表于 2024-7-27 19:20
li-zi 标签作为 player 的子元素，它们本来做上下位移运动，但 player 元素在旋转中，整体动态效果就是帖子 ...

我去试试让它跟着个视频看看。。

红影

马黑黑 发表于 2024-7-27 19:20
li-zi 标签作为 player 的子元素，它们本来做上下位移运动，但 player 元素在旋转中，整体动态效果就是帖子 ...

跟前一个帖子比较了一下，貌似粒子在css里设置动画就会跟着小播走，在js里就会自己走自己的，是这样么？

红影

500 * [1,-1][Math.round(Math.random())] 这个随机取正负，就可以往两边跑了呢

红影

那个锥形渐变带来的光影真美，一下子让帖子的背景色彩变得更漂亮了。
中心取在左上角，只留了1/4，看着像光柱一样，真美

红影

前面那个帖子用border-color: transparent gold;得到有断开的线，这个用border-style: double solid;得到了另一种效果呢。学习了

马黑黑

南无月 发表于 2024-7-27 19:57
盲猜完来看说明，原来我的问题 这里都有解答

place-items: center;父元素里有这个，没见过 ...

一、父元素规定子元素的布排方式

display: grid; /* 网格布局 */
place-items: center; /* 居中 */

这样，当子元素 absolute 定位，且不设置 left、top 等值时，它们绝对居中于父元素。但可以使用 left、top 等重新定位。

二、运动原点 transform-origin 设置

一个元素做 transform 转换时，默认运动的原点在元素的中心，可以设置，比如设置在左上角——

transform-origin: 0 0;

马黑黑

南无月 发表于 2024-7-27 20:00
还是子元素继承父元素的特性。。
所以除了直线跑动之外，就跟着小播一起转了

li-zi 是自定义标签。HTML代码：

<li-zi></li-zi>

CSS选择器：

li-zi { ... }

自定义标签以div为蓝本，它就像div一样。自定义标签命名的时候分两部分，使用 - 做连接符。

马黑黑

红影 发表于 2024-7-27 20:34
跟前一个帖子比较了一下，貌似粒子在css里设置动画就会跟着小播走，在js里就会自己走自己的，是这样么？

前一个帖子，小播主元素没有旋转动作，是它的两个伪元素做旋转；这个，小播旋转，伪元素不做旋转设置，它们跟着小播旋转，粒子也是作为小播的子元素跟着旋转同时有自己的升或降运动。

马黑黑

红影 发表于 2024-7-27 20:35
500 * [1,-1][Math.round(Math.random())] 这个随机取正负，就可以往两边跑了呢

这个是偷懒写法。反正就是获得 1 或 -1 然后乘500

愤怒的葡萄

音乐非常好听。

红影

马黑黑 发表于 2024-7-27 21:03
前一个帖子，小播主元素没有旋转动作，是它的两个伪元素做旋转；这个，小播旋转，伪元素不做旋转设置，它 ...

哦，原来前一个是伪元素在转，去比了半天，还没说到点子上

红影

马黑黑 发表于 2024-7-27 21:06
这个是偷懒写法。反正就是获得 1 或 -1 然后乘500

很简洁，特别好

梦江南

谢谢黑黑老师无私奉献，辛苦了！

海笑

欣赏老师佳作！