Ever Green

马黑黑 · 发表于 2024-9-22 07:32

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

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

x

马黑黑 · 发表于 2024-9-22 07:33

本帖最后由马黑黑于 2024-9-22 07:41 编辑

帖子代码

<style>
#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 700px; background: radial-gradient(transparent 75%, transparent, rgba(0,128,0,.75)), url('https://638183.freep.cn/638183/t24/webp2/evergreen.webp') no-repeat center/cover; box-shadow: 2px 2px 6px #333; display: grid; place-items: center; z-index: 1; position: relative; --opacity: 1; }
#tz::before, #tz::after { position: absolute; content: ''; }
#tz::before { inset: 0; background: url('https://638183.freep.cn/638183/web/svg/leaf.svg') no-repeat center/cover; opacity: var(--opacity); transition: 1.5s; }
#tz::after { left: 30%; width: 90px; height: 90px; background: white; border-radius: 50%; bottom: 18%; box-shadow: inset 10px 10px 50px green, 0 0 36px #111; animation: move 6s ease infinite alternate var(--state); }
.player { position: absolute; width: 200px; height: 200px; cursor: pointer; transition: .6s; opacity: .8; z-index: 10; animation: rot 8s linear infinite var(--state); --deg: 1turn; }
.player:nth-of-type(2) { width: 120px; height: 120px; left: 30%; bottom: 9%; animation-delay: -3s; }
.player:nth-of-type(3) { width: 120px; height: 120px; right: 30%; bottom: 9%; animation-delay: -5s; --deg: -1turn; }
@keyframes rot { to { transform: rotate(var(--deg)); } }
@keyframes move {
	from { left: 30%; transform: rotate(0deg); }
	to { left: calc(70% - 90px); transform: rotate(360deg); }
}
</style>

<div id="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=444548196" autoplay loop></audio>
	<img class="player" src="https://638183.freep.cn/638183/web/svg/p1.svg" alt="" title="播放/暂停" />
	<img class="player" src="https://638183.freep.cn/638183/web/svg/p1.svg" alt="" title="播放/暂停" />
	<img class="player" src="https://638183.freep.cn/638183/web/svg/p1.svg" alt="" title="播放/暂停" />
</div>

<script>
var players = document.querySelectorAll('.player');
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/fscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({
	papa: '#tz',
	scale: players,
	css: 'left: 50%; bottom: 20px; transform: translate(-50%); --bg: transparent; --color: lightblue;',
});
mState = () => {
	tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	tz.style.setProperty('--opacity', aud.paused ? '0' : '1');
	players.forEach(player => player.title = aud.paused ? '播放' : '暂停');
};
aud.onplaying = aud.onpause = () => mState();
players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>

马黑黑 · 发表于 2024-9-22 07:40

本帖：

（一）飘落的绿叶是svg图案，作为背景图片用在了帖子容器伪元素 ::before；

（二）左右滚动的小绿球是纯CSS效果，使用帖子容器伪元素 ::after 做成；

（三）三个小播的图案来源于svg图像，分别使用img标签装载；

（四）帖子子元素的定位部分使用百分比，这样在帖子容器伸缩时子元素的位置能基本保持在原有位置。