In a Birds Eye

马黑黑 · 发表于 2024-7-17 08:01

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

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

x

马黑黑 · 发表于 2024-7-17 08:03

帖子代码

<style>
	#mydiv { --width: 1000px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 667px; background: url('https://638183.freep.cn/638183/t24/3/birdeye.jpg') no-repeat center/cover; box-shadow: 0 0 10px rgba(0,0,0,.45); z-index: 1; pointer-events: none; position: relative; }
	#mydiv::before, #mydiv::after { position: absolute; pointer-events: auto; cursor: pointer; }
	#mydiv::before { content: ''; left: 500px; top: 80px; width: 180px; height: 80px; background: url('https://638183.freep.cn/638183/t24/3/birdeye.jpg') no-repeat -500px -80px; transform: rotate(-5deg); animation: fly 2s infinite alternate var(--state); }
	#mydiv::after { content: url('https://638183.freep.cn/638183/small/ying.png'); left: 10px; top: 10px; transform: scale(.8) rotate(0deg); filter: drop-shadow(0 0 16px lightblue); animation: rot 8s linear infinite var(--state); }
	.cloud { position: absolute; left: 30%; top: 20%; width: 50px; height: 50px; border-radius: 45% 50%; background: snow; box-shadow: snow 65px -15px 0 -5px, white 25px -25px, snow 30px 10px, snow 60px 15px 0 -10px, snow 85px 5px 0 -5px; opacity: .5; }
	.cloud:nth-of-type(2) { left: 45%; top: 5%; transform: scale(.6) skew(15deg); opacity: .4; }
	.cloud:nth-of-type(3) { left: 70%; top: 10%; transform: scale(1.2) skew(-15deg); opacity: .6; }
	@keyframes fly {to { transform: rotate(10deg); } }
	@keyframes rot { to {transform: scale(.8) rotate(360deg); } }
</style>

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

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