Teyata

马黑黑 · 发表于 2024-7-29 07:41

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

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

x

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

帖子代码

<style>
.tiezi {
	margin: 30px 0 30px calc(50% - 561px);
	width: 960px;
	height: 600px;
	box-sizing: border-box;
	border: 3px solid;
	border-image: linear-gradient(to top right, orange, green, red, cyan) 3 3;
	background: url('https://638183.freep.cn/638183/t24/1/teyata.jpg') no-repeat center/cover;
	z-index: 1;
	pointer-events: none;
	position: relative;
}
.tiezi::before, .tiezi::after {
	 position: absolute;
	 content: '';
	 transition: all .45s;
}
.tiezi::before {
	inset: 0;
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: hue-rotate(var(--hue));
}
.tiezi::after {
	right: 260px;
	top: 120px;
	width: 50px;
	height: 50px;
	background: url('https://638183.freep.cn/638183/web/svg/flower_1.svg') no-repeat center/cover;
	transform: rotate(var(--hue));
	pointer-events: auto;
	cursor: pointer;
}
.tiezi:hover::before { backdrop-filter: unset; }
</style>

<div class="tiezi" id="tzi">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=17360999" autoplay loop></audio>
</div>

<script>
aud.ontimeupdate = () => tzi.style.setProperty('--hue', Math.floor(Math.random() * 360) + 'deg');
tzi.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 · 发表于 2024-7-29 07:58

本帖最后由马黑黑于 2024-7-29 08:16 编辑

本帖：

（一）帖子容器使用渐变边框背景。border-image 属性中，后面的参数对于渐变背景可以随意，一般直接写一个合法数字即可，比如与边框厚度一致的一个数字，也可以写4个数字，例：3 3 3 3。该属性数字之前或之后还可以跟关键字 fill，举例如下：

border-image: linear-gradient(red, orange, plum, green, tan) 3 3 3 3 fill;

这将给整个元素加上背景渐变，其他的背景设置将无效，除非使用 background-blend-mode 等滤镜。

（二）帖子变色特效：使用 ::before 做蒙层，蒙层背景白色带65%的透明度并通过 backdrop-filter 滤镜的 hue-rotate 滤镜实体随音乐的播放随机转换色相。

CSS滤镜 filter 能用的滤镜实体，backdrop-filter 都能用。

（三）小播：帖子容器伪元素 ::after 加svg背景图做成，以菇凉的头饰出现，它巧妙地使用色相转换自定义变量作为自己的旋转依据（因为都是使用的 deg 单位）随音乐播放转动，转向灵活。