百鸟归巢

马黑黑

马黑黑

帖子代码

<style>
	#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp2/bngi.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
	#msvg { position: absolute; left: 55%; bottom: 20%; cursor: pointer; animation: rot 10s linear infinite var(--state); }
	#msvg:hover path { transition: 1s; stroke: teal; }
	#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
	#fsbtn { position: absolute; left: 50%; bottom: 15px; color: white; padding: 4px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
	@keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2030877250" autoplay loop></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/08/14/15/45/18/video64d9db8e3d617.mp4" autoplay loop muted></video>
	<svg id="msvg" width="200" height="200"></svg>
	<span id="fsbtn"></span>
</div>
 
<script  type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
var all = 12;
Array(all).fill(0).forEach( (_,k) => dr.path('M70 180 Q100 0,130 180', 'none', 'lightcyan', 6, 'round').transform(`rotate(${360 / all * k} 100 100)`) );

msvg.onclick = () => {
	msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
	aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
};

fscreen.fs('mydiv', 'fsbtn');

aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script>

马黑黑

音乐较长，但百听不厌

马黑黑

本帖配套 svgdr教程·path路径 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! 做路径图案演示

梦江南

早上问好老师！这个背景太有意境了！很佩服！

秋思梦景

问候老师好！精美音画佳作，精心制作分享。为您点赞！向您学习！

朵拉

这个也好看，学习了

红影

这个小播有趣，把窄窄的二次贝塞尔曲线组合起来，竟然这么美的呢

红影

黑黑很少用这样的透明图呢，当中的图图半透明，很好地遮挡了不要的东西

马黑黑

醉美水芙蓉 发表于 2024-11-7 11:45
老师视频和兔图图搭配漂亮！

花飞飞

乍一看居然没分清背景是哪一部分，视频是哪一部分。
看了代码才分清~~这个背景的选择出乎意料。。
鸟儿飞翔，松树随风摇曳，小播如树枝编成的巢穴一般。。
山青水秀好一派大自然的景色。。

马黑黑

花飞飞 发表于 2024-11-7 19:33
乍一看居然没分清背景是哪一部分，视频是哪一部分。
看了代码才分清~~这个背景的选择出乎意料。。
鸟儿飞 ...

-webkit-mask 就是这么神奇

花飞飞

小播是用二次贝塞尔曲线画成的子弹头一样的形状，旋转12个组合而成。。。奇特奇妙。。
触碰小播变色，依然加了反转颜色，活泼。。

马黑黑

花飞飞 发表于 2024-11-7 19:36
小播是用二次贝塞尔曲线画成的子弹头一样的形状，旋转12个组合而成。。。奇特奇妙。。
触碰小播 ...

有一点点交互，虽然意义不大

花飞飞

最近几个视频都有些特别，
没有滤镜设置，也没有透明度，
只用径向渐变去掉中间LOGO,同时透出下方背景图片。
且最近视频都加了 object-fit: cover;这个作用是什么呢。

马黑黑

花飞飞 发表于 2024-11-7 19:41
最近几个视频都有些特别，
没有滤镜设置，也没有透明度，
只用径向渐变去掉中间LOGO,同时透出下方背景图 ...

这个一直都有的：视频适应尺寸，这和背景的 cover 一个道理

花飞飞

马黑黑 发表于 2024-11-7 19:43
这个一直都有的：视频适应尺寸，这和背景的 cover 一个道理

矮油，翻了一下还真的一直都有~~
之前用得各种参数多，就只管滤镜，透明度啥的
最近几个视频选得都挺好，处理的特别，天天用的愣是看出不一样的东西来