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

[碎语] 源码小屋

[复制链接]
凡哥
 楼主| 发表于 2024-7-17 12:50 | 显示全部楼层
本帖最后由 凡哥 于 2024-7-17 12:52 编辑

2024年7月17日 星期三

In a Birds Eye

<style>
	#mydiv { --width: 1000px; margin:130px 0 30px calc(50% - (var(--width) / 2 + 90px)); 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>

评分

1

查看全部评分

点评 收
回复

使用道具

凡哥
 楼主| 发表于 2024-7-18 21:23 | 显示全部楼层
本帖最后由 凡哥 于 2024-7-18 21:24 编辑

2024年7月18日 星期四

墨家神机

<style>
#tiezi {
	--width: 960px;
	margin: 30px 0 30px calc(50% - (var(--width) / 2 + 90px));
	width: var(--width);
	height: 600px;
	background:
		url('https://638183.freep.cn/638183/t24/3/mzuj.jpg') no-repeat center/cover,
		radial-gradient(transparent 25%, orange 30%, transparent 35%) center/30% 30%,
		radial-gradient(circle, transparent 25%, green 26%, green 28%, transparent 29%) center/30% 10%;
	background-blend-mode: overlay, color, difference;
	box-shadow: 0 0 10px rgba(0,0,0,.5);
	pointer-events: none;
	position: relative;
}
#tiezi::before, #tiezi::after {
	position: absolute;
	content: '';
}
#tiezi::before {
	inset: 0;
	background: linear-gradient(to right, transparent, rgba(0,0,0,.3), transparent, rgba(0,0,0,.3), transparent) 0 0/200% 100%;
	animation: bgmove 4s infinite alternate var(--state);
}
#tiezi::after {
	left: 280px;
	top: 10px;
	content: url('https://638183.freep.cn/638183/t22/btn/star.png');
	cursor: pointer;
	pointer-events: auto;
	opacity: .8;
	transform: rotate(15deg);
	animation: flash 1s infinite alternate var(--state);
}
@keyframes bgmove { to { background-position: -200% 0; } }
@keyframes flash { to { transform: rotate(-15deg); opacity: .1; } }
</style>

<div id="tiezi">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=411356357" poster="https://638183.freep.cn/638183/t23/btn/f3.png" autoplay loop></audio>
</div>

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

评分

1

查看全部评分

点评 收
回复

使用道具

凡哥
 楼主| 发表于 2024-7-19 13:33 | 显示全部楼层
本帖最后由 凡哥 于 2024-7-19 14:58 编辑

2024年7月19日 星期五

游魂飞魄

<style>
#mydiv {
	margin: 230px 0 30px calc(50% - 730px);
	width: 1280px;
	height: 720px;
	background: url('https://638183.freep.cn/638183/t24/3/yhfp.jpg') no-repeat center/cover;
	box-shadow: 0 0 8px rgba(0,0,0,.6);
	z-index: 1;
	pointer-events: none;
	display: grid;
	place-items: center;
	position: relative;
}
#mydiv::before, #mydiv::after {
	position: absolute;
	content: '';
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: lightblue radial-gradient(teal 4px, transparent 0) center / 12px 8px;
	mask: radial-gradient(circle, red 10%, rgba(0,0,0,.25) 80%, red 0);
	box-shadow: inset 0 0 4px teal;
	pointer-events: auto;
	cursor: pointer;
	animation: bgchg 18s infinite alternate var(--state), rot 18s linear infinite var(--state);
}
#mydiv::after { right: 260px; top: 80px; animation-delay: -10s; }
@keyframes bgchg { to { background-size: 48px 24px; filter: hue-rotate(360deg); } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

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

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

评分

1

查看全部评分

点评 收
回复

使用道具

花简静
发表于 2024-7-19 19:58 | 显示全部楼层
好多天没来这里啦～
纯代码绘图～
高级又神秘～
点评 收
回复

使用道具

凡哥
 楼主| 发表于 2024-7-20 18:19 | 显示全部楼层
花简静 发表于 2024-7-19 19:58
好多天没来这里啦～
纯代码绘图～
高级又神秘～

点评 收
回复

使用道具

凡哥
 楼主| 发表于 2024-7-20 18:24 | 显示全部楼层

2024年7月20日 星期六

自然之声

<style>
#mydiv {
	margin: 30px 0 30px calc(50% - 602px);
	width: 1024px;
	height: 576px;
	background: url('https://638183.freep.cn/638183/t24/3/zrvu.jpg') no-repeat center/cover;
	box-shadow: 0 0 10px rgba(0,0,0,.5);
	overflow: hidden;
	position: relative;
}
#mydiv:hover #player { opacity: .8; }
#mydiv::before {
	position: absolute;
	content: '';
	inset: -260px;
	background: radial-gradient(circle, transparent, rgba(60,0,120,.35), transparent) center / 30% 30%;
	transform: rotate(0deg);
	animation: bgsize 8s infinite alternate var(--state);
}
#player {
	position: absolute;
	left: calc(50% - 75px);
	top: 150px;
	mix-blend-mode: multiply;
	transition: 1s;
	opacity: 0;
	cursor: pointer;
}
@keyframes bgsize {
	to { transform: rotate(360deg); background-size: 50% 50%; }
}
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1899223061" autoplay loop></audio>
	<img id="player" src="https://638183.freep.cn/638183/small/sunbirds.jpg" alt="" title="播放/暂停" />
</div>

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

评分

1

查看全部评分

点评 收
回复

使用道具

凡哥
 楼主| 发表于 2024-7-21 08:19 | 显示全部楼层
本帖最后由 凡哥 于 2024-7-21 09:10 编辑

2024年7月21日 星期日

1001

<style>
#mydiv {
	margin: 30px 0 30px calc(50% - 602px);
	width: 1024px;
	height: 576px;
	background: url('https://638183.freep.cn/638183/t24/3/1001.jpg') no-repeat center/cover;
	box-shadow: 0 0 10px rgba(0,0,0,.5);
	position: relative;
}
#player {
	position: absolute;
	right: 60px;
	bottom: 10px;
	-webkit-mask: url('https://638183.freep.cn/638183/web/svg/6star.svg') no-repeat center/150% 150%;
	cursor: pointer;
}
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=401382534" autoplay loop></audio>
	<img id="player" alt="" title="播放/暂停" src="https://638183.freep.cn/638183/t24/3/alan4.jpg" />
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => {
	player.style.WebkitMask = `url(${aud.paused ? 'https://638183.freep.cn/638183/web/svg/6star_1.svg' : 'https://638183.freep.cn/638183/web/svg/6star.svg'}) no-repeat center/150% 150%`;
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
点评 收
回复

使用道具

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

2024年7月22日 星期一

苍：序曲

<style>
#papa {
	margin: 230px 0 30px calc(50% - 730px);
	width: 1280px;
	height: 640px;
	background: url('https://638183.freep.cn/638183/t24/e1e.jpg') no-repeat center/cover;
	box-shadow: 0 0 8px rgba(0,0,0,.6);
	pointer-events: none;
	z-index: 1;
	position: relative;
}
#papa::before, #papa::after { position: absolute; content: ''; }
#papa::before {
	width: 900px;
	height: 640px;
	right: 0;
	background: url('https://638183.freep.cn/638183/t24/e2e.jpg') no-repeat center/cover;
	-webkit-mask: linear-gradient(110deg, transparent, red);
}
#papa::after {
	left: 40%;
	bottom: 45%;
	content: url('https://638183.freep.cn/638183/small/hxxb.webp');
	cursor: pointer;
	pointer-events: auto;
	mix-blend-mode: color-burn;
	animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>


<div id="papa" title="播放/暂停">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=154377" autoplay loop></audio>
</div>

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

评分

1

查看全部评分

点评 收
回复

使用道具

花简静
发表于 2024-7-22 14:16 | 显示全部楼层
凡哥 发表于 2024-7-22 12:45
2024年7月22日 星期一
苍：序曲

老师最近的代码都是分行分级，结构清晰。非常适合音画人。。
点评 收
回复

使用道具

凡哥
 楼主| 发表于 2024-7-23 13:41 | 显示全部楼层

2024年7月23日 星期二

出埃及记

<style>
#mydiv {
	margin: 230px 0 30px calc(50% - 630px);
	width: 1080px;
	height: 600px;
	background: url('https://638183.freep.cn/638183/t24/3/iajj.jpg') no-repeat center/cover;
	box-shadow: 0 0 10px rgba(0,0,0,.6);
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	position: relative;
}
#vid {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: calc(100% + 65px);
	object-fit: cover;
	-webkit-mask: linear-gradient(200deg, red 70%, transparent 75%, transparent);
}
#player {
	position: absolute;
	left: 160px;
	bottom: 150px;
	width: 100px;
	cursor: pointer;
	pointer-events: auto;
	filter: invert(.55);
	animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=516761860" autoplay loop></audio>
	<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/75/5b49a81fc972d.mp4" autoplay loop muted></video>
	<img id="player" alt="" title="播放/暂停" src="https://638183.freep.cn/638183/web/svg/3star-01.svg" />
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => {
	player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	aud.paused ? vid.pause() : vid.play();
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

评分

1

查看全部评分

点评 收
回复

使用道具

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

本版积分规则

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

GMT+8, 2025-12-18 08:57

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

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