源码小屋

凡哥

凡哥

2024年8月5日 星期一

唐

<style>
#mydiv {
	margin: 230px 0 30px calc(50% - 730px);
	width: 1280px;
	height: 720px;
	background: tan url('https://638183.freep.cn/638183/t24/webp/tang.webp') no-repeat center/cover;
	box-shadow: 0 0 6px rgba(0,0,0,.95);
	z-index: 1;
	position: relative;
}
#player {
	position: absolute;
	left: calc(50% - 150px);
	top: -150px;
	width: 300px;
	height: 300px;
	background: url('https://638183.freep.cn/638183/small/ygf.jpg') no-repeat center/cover;
	-webkit-mask: url('https://638183.freep.cn/638183/web/svg/flower_3s.svg') no-repeat center/100px 100px;
	transition: .72s;
	cursor: pointer;	
}
#player:hover { -webkit-mask-size: 300px 300px; }
</style>

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

<script>
mState = () => {
	player.style.webkitMaskImage = `url(${aud.paused ? 'https://638183.freep.cn/638183/web/svg/flower_3.svg' : 'https://638183.freep.cn/638183/web/svg/flower_3s.svg'})`;
	player.title = '点击' + ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

花简静

凡哥 发表于 2024-8-4 18:33

这是心想事成

花简静

问下老师，svg动图哪里有？是找的还是自己制作的？

凡哥

花简静 发表于 2024-8-5 13:15
问下老师，svg动图哪里有？是找的还是自己制作的？

一般是自己制作。svg和HTML是兄弟一样很相近，不过svg专业不同，主打图像制作而且是矢量的变大变小不失真。入门级教程：

https://www.runoob.com/svg/svg-tutorial.html

花简静

凡哥 发表于 2024-8-5 19:58
一般是自己制作。svg和HTML是兄弟一样很相近，不过svg专业不同，主打图像制作而且是矢量的变大变小不失真 ...

这个太好了，这么系列的教程，
我收藏起来每天都来学一 点

凡哥

花简静 发表于 2024-8-5 21:22
这个太好了，这么系列的教程，
我收藏起来每天都来学一 点

这个也是急不得，东西太多。学一遍，懂个大概，用到时再去翻翻

花简静

凡哥 发表于 2024-8-5 22:07
这个也是急不得，东西太多。学一遍，懂个大概，用到时再去翻翻

好哒，先看一遍有个印象。
翻看一下是真的挺多。
光这一个SVG就这么厚一大本。

凡哥

花简静 发表于 2024-8-5 22:58
好哒，先看一遍有个印象。
翻看一下是真的挺多。
光这一个SVG就这么厚一大本。

svg非常细腻、琐碎，细节之多令人惊叹，学透它不容易。一般都是学一遍懂个原理和路数，真正用时查查资料。

花简静

凡哥 发表于 2024-8-6 08:05
svg非常细腻、琐碎，细节之多令人惊叹，学透它不容易。一般都是学一遍懂个原理和路数，真正用时查查资料 ...

从第一节看起，目前下了编辑软件。。
试用过程中又根据提示安装了一个，可以看到预览啦。。