归来

马黑黑

:doodle { @size: 200px; @shape: circle; left: 10px; top: 10px; cursor: pointer; z-index: 2; animation: rot 6s infinite linear forwards var(--state); } border: @r(2px, 10px) solid hsla(calc(100 * @i()), 80%, 60%, @r(.6)); border-radius: 50%; transform: scale(@r(6, 15)); @keyframes rot { to { transform: rotate(360deg); } } :doodle { @size: 1024px 640px; } position: absolute; left: @r(100)%; top: -20%; :after { position: absolute; content: "@p(✿,❁,❀,🌺,💮)"; color: snow; font-size: @r(12, 40)px; } animation: fall @r(8,20)s @r(-6, 6)s infinite var(--state); @keyframes fall { 0% { top: -20%; transform: rotate(0deg); } 100% {top: 120%; transform: rotate(360deg); } }

马黑黑

帖子代码：

<style>
#papa {
	margin: auto;
	width: 1024px;
	height: 640px;
	background: url('https://638183.freep.cn/638183/t23/1/gvld.jpeg') no-repeat center/cover;
	box-shadow: 0 0 8px #000;
	position: relative;
	z-index: 1;
	--state: paused;
}
css-doodle { position: absolute; }

</style>

<div id="papa">
	<css-doodle grid="6" id="mplayer">
		:doodle {
			@size: 200px;
			@shape: circle;
			left: 10px;
			top: 10px;
			cursor: pointer;
			z-index: 2;
			animation: rot 6s infinite linear forwards var(--state);
		}
		border: @r(2px, 10px) solid hsla(calc(100 * @i()), 80%, 60%, @r(.6));
		border-radius: 50%;
		transform: scale(@r(6, 15));
		@keyframes rot { to { transform: rotate(360deg); } }
	</css-doodle>
	<css-doodle grid="20">
		:doodle {
			@size: 1024px 640px;
		}
		position: absolute;
		left: @r(100)%;
		top: -20%;
		:after {
			position: absolute;
			content: "@p(✿,❁,❀,🌺,💮)";
			color: snow;
			font-size: @r(12, 40)px;
		}
		animation: fall @r(8,20)s @r(-6, 6)s infinite var(--state);
		@keyframes fall {
			0% { top: -20%; transform: rotate(0deg); }
			100% {top: 120%; transform: rotate(360deg); }
		}
	</css-doodle>
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=544954253" autoplay loop></audio>
</div>

<script>
	let script = document.createElement('script');
	script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
	document.head.appendChild(script);
	let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	aud.addEventListener('play', mState, false);
	aud.addEventListener('pause', mState, false);
	mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

起个网名好难

欣赏，学习

一斛珠

这么漂亮哇

樵歌

为是楼兰菇凉撒的花雨么

樵歌

觉得吧，左上那个圆球播放器和漫天的花雨不是太和谐。

红影

那个圆球也是代码做的啊，这个还是头一次看到。
content: "@p(✿,❁,❀,🌺,💮)"; 这个居然还能选带颜色的图标，不知道这些图标都哪找到。

红影

这些花瓣真多，撒在荒城绵延的历史中。黑黑的制作漂亮

梦油

目不暇接

马黑黑

梦油 发表于 2023-5-10 16:31
目不暇接

感谢支持

小辣椒

欣赏黑黑的新产品

焱鑫磊

漂亮！学习！

马黑黑

焱鑫磊 发表于 2023-5-10 19:05
漂亮！学习！

亦是金

问好黑黑老师！欣赏学习了！

马黑黑

亦是金 发表于 2023-5-10 19:29
问好黑黑老师！欣赏学习了！

晚上好

梦缘

感谢老师的代码分享，欣赏问好！

马黑黑

梦缘 发表于 2023-5-10 20:50
感谢老师的代码分享，欣赏问好！

晚上好

南无月

看看，彩球漂亮

马黑黑

南无月 发表于 2023-5-10 21:55
看看，彩球漂亮

晚上嚎