The Promise

马黑黑

马黑黑

帖子代码

<style>
	#papa { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/promise.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; }
	#player { position: absolute; bottom: 10px; left: calc(50% - 100px); width: 200px; height: 200px; cursor: pointer; animation: rot 8s linear infinite var(--state); }
	#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(transparent 10%, red 30%, red 0); pointer-events: none; }
	@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=410055747" autoplay loop></audio>
	<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/41/56/6332b7166860f.mp4" autoplay loop muted></video>
	<img id="player" alt="" src="https://638183.freep.cn/638183/web/svg/9star.svg"/>
</div>

<script>
	mState = () => {
		papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
		aud.paused ? vid.pause() : vid.play();
	};
	aud.onplaying = aud.onpause = () => mState();
	player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑

醉美水芙蓉 发表于 2024-10-5 20:40
黑黑老师选的背景视频挺漂亮的！

谢谢

花飞飞

我想说，色彩靓丽，音乐震撼。。。感觉以后跟贴都不用改音乐。。

花飞飞

这个小播用了火星配色。来自外星的神秘图案。。

花飞飞

点一百零八个赞。。。好看。。

马黑黑

花飞飞 发表于 2024-10-5 21:39
这个小播用了火星配色。来自外星的神秘图案。。

夸张了吧

马黑黑

花飞飞 发表于 2024-10-5 21:39
点一百零八个赞。。。好看。。

谢谢谢谢

梦江南

又是一个漂亮的播放器，点赞学习！

马黑黑

梦江南 发表于 2024-10-6 07:42
又是一个漂亮的播放器，点赞学习！

播放器可以在线生成，即将发布，敬请关注

红影

这小播又是漂亮的svg图案，还加了顶点的小圆，像顶皇冠，真漂亮

红影

这视频配合这样的背景，很有寓意，山高水长，不变的是彼此的约定。
欣赏黑黑好帖

马黑黑

红影 发表于 2024-10-6 09:08
这小播又是漂亮的svg图案，还加了顶点的小圆，像顶皇冠，真漂亮

越看越好看是吧

马黑黑

红影 发表于 2024-10-6 09:12
这视频配合这样的背景，很有寓意，山高水长，不变的是彼此的约定。
欣赏黑黑好帖

感谢支持

红影

马黑黑 发表于 2024-10-6 12:19
越看越好看是吧

是啊，而且这个小播还有在线工具，太漂亮了

红影

马黑黑 发表于 2024-10-6 12:19
感谢支持

黑黑的制作寓意真棒

马黑黑

红影 发表于 2024-10-6 17:15
黑黑的制作寓意真棒

果酱果酱

马黑黑

红影 发表于 2024-10-6 17:14
是啊，而且这个小播还有在线工具，太漂亮了

可以配置不同的颜色

花飞飞

马黑黑 发表于 2024-10-5 21:46
谢谢谢谢

谢多多