花简静贴子代码及说明汇总（翻页有新贴）

花简静 · 发表于 2024-9-22 22:04

花简静 · 发表于 2024-9-22 22:04

本帖最后由花简静于 2024-12-22 22:03 编辑

<style>

#tz { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background:url('https://642303.freep.cn/642303/tu/20240922rsyl01.webp') no-repeat center/cover; box-shadow: 2px 2px 6px #333; display: grid; place-items: center; z-index: 1; position: relative; --opacity: 1; overflow: hidden;}

.player { position: absolute; width: 100px; height: 100px; right:330px;cursor: pointer; transition: .6s; opacity: .8; z-index: 10; animation: rot 8s linear infinite var(--state); --deg: 1turn;mix-blend-mode: soft-light; }

@keyframes rot { to { transform: rotate(var(--deg)); } }

#vid1 { position: absolute;

width: 100%;

height: 100%;

opacity: .63;

object-fit: cover;

mix-blend-mode: screen;

-webkit-mask: linear-gradient(to top, red 50%, transparent 55%, transparent);

pointer-events: none;

}

#vid2 {position: absolute; width: 110%; height: 100%;mix-blend-mode:soft-light; opacity: 0.39; left:-260px;-webkit-mask: radial-gradient(circle, transparent, transparent,transparent,silver, silver,silver,lightgreen, transparent, transparent, transparent);

}

</style>

</div>

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: #956056;',

});

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.paused ? vid1.pause() : vid1.play();

aud.paused ? vid2.pause() : vid2.play();

};

aud.onplaying = aud.onpause = () => mState();

players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());

</script>

花简静 · 发表于 2024-9-22 22:04

花简静 · 发表于 2024-9-22 22:04

花简静 · 发表于 2024-9-22 22:04

花简静 · 发表于 2024-9-22 22:04

花简静 · 发表于 2024-9-24 19:16

花简静 · 发表于 2024-9-24 19:16

花简静 · 发表于 2024-9-24 19:16

花简静 · 发表于 2024-9-24 19:16

花简静贴子代码及说明汇总（翻页有新贴）

版主勋章

山高为峰

山外有山

巳巳如意

两周年庆

守望千山

少年歌行

一叶知秋

樱果相依