墨家神机

马黑黑 · 发表于 2024-7-18 07:42

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-7-18 07:43

帖子代码

<style>
#tiezi {
	--width: 960px;
	margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
	width: var(--width);
	height: 600px;
	background:
		url('https://638183.freep.cn/638183/t24/3/mzuj.jpg') no-repeat center/cover,
		radial-gradient(transparent 25%, orange 30%, transparent 35%) center/30% 30%,
		radial-gradient(circle, transparent 25%, green 26%, green 28%, transparent 29%) center/30% 10%;
	background-blend-mode: overlay, color, difference;
	box-shadow: 0 0 10px rgba(0,0,0,.5);
	pointer-events: none;
	position: relative;
}
#tiezi::before, #tiezi::after {
	position: absolute;
	content: '';
}
#tiezi::before {
	inset: 0;
	background: linear-gradient(to right, transparent, rgba(0,0,0,.3), transparent, rgba(0,0,0,.3), transparent) 0 0/200% 100%;
	animation: bgmove 4s infinite alternate var(--state);
}
#tiezi::after {
	left: 280px;
	top: 10px;
	content: url('https://638183.freep.cn/638183/t22/btn/star.png');
	cursor: pointer;
	pointer-events: auto;
	opacity: .8;
	transform: rotate(15deg);
	animation: flash 1s infinite alternate var(--state);
}
@keyframes bgmove { to { background-position: -200% 0; } }
@keyframes flash { to { transform: rotate(-15deg); opacity: .1; } }
</style>

<div id="tiezi">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=411356357" poster="https://638183.freep.cn/638183/t23/btn/f3.png" autoplay loop></audio>
</div>

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

南无月 · 发表于 2024-7-18 07:49

径向渐变椭圆的横着挖，圆的竖着挖，效果跟特种部队训器材似的，当过兵的就是有不一样的思路～

马黑黑 · 发表于 2024-7-18 07:53

本帖：

（一）圈圈串以抽象的方式代表墨家机巧。实现手段没能做到墨家的无神可超越的水平，仅利用帖子主元素的两个径向渐变背景组合而成，并利用背景融合属性（background-blend-mode）的设置与主图背景混合出帖子所见到的静态背景图样。

（二）帖子的左右移动光效，通过帖子主元素的伪元素 ::before 实现，伪元素设置向右伸展的线性背景，背景长度设为帖子尺寸的一倍，然后调用关键帧动画改变背景的水平方向位置。