1 ...383940414243444546... 49下一页
返回列表 发新帖
楼主: 凡哥

[碎语] 源码小屋

[复制链接]
凡哥
 楼主| 发表于 2024-9-18 17:39 | 显示全部楼层

2024年9月18日 星期三

After Hours VIP

<style>
#tz {margin: 30px 0 30px calc(50% - 730px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp2/vips.webp') no-repeat center/cover; box-shadow: 0 0 6px #111; z-index: 1;position: relative; display: grid; place-items: center; --yy: 270px; }
.player {position: absolute; width: 160px; height: 160px; background: url('https://638183.freep.cn/638183/web/svg/jupm.svg') no-repeat center/cover; animation: rot 6s linear infinite var(--state); cursor: pointer; filter: drop-shadow(0 0 4px #000); transition: .45s; --deg: 360deg; }
.player:hover { --deg: 1440deg; }
.player:nth-of-type(2) { bottom: 10px; }
#vid { position: absolute; width: 100%; height: 30%; top: 0; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(tan,tan,transparent); }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2603659563" autoplay loop></audio>
	<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/91/5b4d7c5becb5a.mp4" autoplay loop muted></video>
	<div class="player"></div>
	<div class="player"></div>
</div>

<script>
var players = tz.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: 70%; bottom: 50px; --bg: transparent; --color: white',
});
mState = () => {
	tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	aud.paused ? vid.pause() : vid.play();
};
aud.onplaying = aud.onpause = () => mState();
players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>

评分

1

查看全部评分

点评 收
回复

使用道具

凡哥
 楼主| 发表于 2024-9-20 07:53 | 显示全部楼层

2024年9月20日 星期五

Humanity

<style>
#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 700px; background: linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.35)), url('https://638183.freep.cn/638183/t24/4/huma.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #333; z-index: 1; position: relative; }
#tz::after { position: absolute; inset: 0; content: ''; background: url('https://638183.freep.cn/638183/web/svg/updwonballs.svg') no-repeat center/cover; opacity: var(--opacity); transition: 1.5s; pointer-events: none; }
#player { position: absolute; left: 60px; top: 60px; width: 200px; height: 200px; cursor: pointer; transition: .6s; opacity: .8; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: invert(100%) drop-shadow(0 0 4px #333); }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

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

<script>
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: [player],
	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');
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

评分

2

查看全部评分

点评 收
回复

使用道具

凡哥
 楼主| 发表于 2024-9-22 07:45 | 显示全部楼层

2024年9月22日 星期日

Ever Green

<style>
#tz { margin: 30px 0 30px calc(50% - 730px); 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>

评分

2

查看全部评分

点评 收
回复

使用道具

凡哥
 楼主| 发表于 2024-9-23 12:14 | 显示全部楼层

2024年9月23日 星期一

Dwarf Star

<style>
#tz { margin: 30px 0 30px calc(50% - 641px); width: 1280px; height: 700px; background: radial-gradient(transparent 75%, transparent, #eee), url('https://638183.freep.cn/638183/t24/webp2/dwarf.webp') no-repeat center/cover; box-shadow: 2px 2px 6px #333; display: grid; place-items: center; z-index: 1; position: relative; --opacity: .8; }
#player { position: absolute; width: 200px; height: 200px; cursor: pointer; transition: .6s; opacity: .8; animation: rot 8s linear infinite var(--state); }
#msvg { position: absolute; border: none; pointer-events: none; transition: 1.2s; }

@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29823218" autoplay loop></audio>
	<img id="player" src="https://638183.freep.cn/638183/web/svg/p2.svg" alt="" title="播放/暂停" />
	<iframe id="msvg" src="https://638183.freep.cn/638183/web/svg/ball8path1.svg" width="100%" height="100%"></iframe>
</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: [player],
	css: 'left: 50%; bottom: 20px; transform: translate(-50%); --bg: transparent; --color: #eee;',
});

mState = () => {
	tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	msvg.style.setProperty('opacity', aud.paused ? '0' : '.8');
	player.title = aud.paused ? '播放' : '暂停';
};

aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

评分

2

查看全部评分

点评 收
回复

使用道具

凡哥
 楼主| 发表于 2024-9-24 12:51 | 显示全部楼层

2024年9月24日 星期二

Earth

<style>
#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/earth.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 0 0 6px #111; z-index: 1; position: relative; }
#player { position: absolute; cursor: pointer; fill: none; stroke: green; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;  }
li-zi { position: absolute; width: 10px; height: 6px; offset-path: path('M100 100Q200 800,1024 360'); offset-distance: 0%; background: green; animation: moving 10s linear infinite var(--state); }
@keyframes moving {	to { offset-distance: 100%; } }
</style>

<div id="tz">
	<!-- Earth -->
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=18649290" autoplay loop></audio>
	<svg id="player" width="200" height="200" viewBox="-100 -100 200 200">
		<ellipse cx="0" cy="0" rx="80" ry="60" fill="none" stroke-width="4" stroke="green" stroke-dasharray="4 8"></ellipse>
		<polygon points="0 -50, 50 50, -50 50" pathLength="1">
			<animate id="b1" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="0s;e1.end+.5s" fill="freeze"/>
			<animate id="e1" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="e2.end" fill="freeze"/>
		</polygon>
		<circle cx="0" cy="0" r="50" pathLength="1">
			<animate id="b2" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="b1.end" fill="freeze"/>
			<animate id="e2" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="e3.end" fill="freeze"/>
		</circle>
		<rect x="-50" y="-50" width="100" height="100" pathLength="1" transform="rotate(45)">
			<animate id="b3" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="b2.end" fill="freeze"/>
			<animate id="e3" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="b3.end+1s" fill="freeze"/>
		</rect>
	</svg>
</div>

<script>
Array(total=40).fill(0).forEach((lz,key) => {
	lz = document.createElement('li-zi');
	lz.style.cssText += `animation-delay: -${10 / total * key}s`;
	if(key % 2 === 0) lz.style.offsetPath = `path('M100 100Q800 -150,1024 360')`;
	tz.appendChild(lz);
	console.log(lz);
});

mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), player.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), player.unpauseAnimations());
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

评分

2

查看全部评分

点评 收
回复

使用道具

凡哥
 楼主| 发表于 2024-9-25 22:42 | 显示全部楼层
点评 收
回复

使用道具

凡哥
 楼主| 发表于 2024-9-29 08:19 | 显示全部楼层
本帖最后由 凡哥 于 2024-9-29 08:20 编辑

2024年9月29日 星期日

Warm Light

<style>
#mydiv { margin: 20px auto; width: 1024px; height: 640px; background: url('data:image/svg+xml;charset=utf-8,<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg"><defs><path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/></defs><text dx="20" dy="20" font-size="20" fill="plum" font-family="Arial"><textPath href="%23path" textLength="610">🍁🍃🍂💮🌿🌸🍁🍃🍂💮🌿🌸</textPath></text></svg>') no-repeat center/ 60%,url('https://638183.freep.cn/638183/t24/webp2/warmlight.webp') no-repeat center/cover; box-shadow: 0 0 6px #666; position: relative; }
#psvg { position: absolute; width: 200px; height: 200px; left: calc(50% - 100px); top: calc(50% - 100px); filter: drop-shadow(2px 2px 0 #000); animation: rot 8s cubic-bezier(0.89, 0.04, 0.24, 1.03) infinite alternate var(--state); cursor: pointer; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1456446090" autoplay loop></audio>
	<img id="psvg" alt='' src='data:image/svg+xml;charset=utf-8,<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg"><defs><path id="path1" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/></defs><text dx="30" dy="30" font-size="40" fill="red" font-family="Arial"><textPath href="%23path1" textLength="620">🍁🍃🍂💮🌿🌸🍁🍃🍂💮🌿</textPath></text></svg>'/>
</div>

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

评分

1

查看全部评分

点评 收
回复

使用道具

花简静
发表于 2024-9-29 20:54 | 显示全部楼层
凡哥 发表于 2024-9-25 22:42

看时间这是夜宵
点评 收
回复

使用道具

花简静
发表于 2024-9-29 20:56 | 显示全部楼层
凡哥 发表于 2024-9-29 08:19
本帖最后由 凡哥 于 2024-9-29 08:20 编辑 2024年9月29日 星期日
Warm Light

这是老师站里那一版。。创新复杂版。
第一次看到URL和IMG不是图片地址，而是代码当场绘制的。。。
点评 收
回复

使用道具

凡哥
 楼主| 发表于 2024-9-30 07:34 | 显示全部楼层
花简静 发表于 2024-9-29 20:54
看时间这是夜宵

点评 收
回复

使用道具

下一页 »
1 ...383940414243444546... 49下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-9-15 17:34

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表