百鸟归巢
<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>
<scripttype="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>
<h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<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>
<scripttype="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>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>
音乐较长，但百听不厌 本帖配套 svgdr教程·path路径 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! 做路径图案演示
早上问好老师！这个背景太有意境了！很佩服！{:4_187:} 问候老师好！精美音画佳作，精心制作分享。为您点赞！向您学习！{:4_199:}{:4_187:} 这个也好看，学习了{:4_190:} 这个小播有趣，把窄窄的二次贝塞尔曲线组合起来，竟然这么美的呢{:4_199:} 黑黑很少用这样的透明图呢，当中的图图半透明，很好地遮挡了不要的东西{:4_173:} 醉美水芙蓉 发表于 2024-11-7 11:45
老师视频和兔图图搭配漂亮！
{:4_190:} 乍一看居然没分清背景是哪一部分，视频是哪一部分。
看了代码才分清~~这个背景的选择出乎意料。。
鸟儿飞翔，松树随风摇曳，小播如树枝编成的巢穴一般。。
山青水秀好一派大自然的景色。。 花飞飞 发表于 2024-11-7 19:33
乍一看居然没分清背景是哪一部分，视频是哪一部分。
看了代码才分清~~这个背景的选择出乎意料。。
鸟儿飞 ...
-webkit-mask 就是这么神奇 小播是用二次贝塞尔曲线画成的子弹头一样的形状，旋转12个组合而成。。。奇特奇妙。。{:4_199:}
触碰小播变色，依然加了反转颜色，活泼。。 花飞飞 发表于 2024-11-7 19:36
小播是用二次贝塞尔曲线画成的子弹头一样的形状，旋转12个组合而成。。。奇特奇妙。。
触碰小播 ...
有一点点交互，虽然意义不大 最近几个视频都有些特别，
没有滤镜设置，也没有透明度，
只用径向渐变去掉中间LOGO,同时透出下方背景图片。
且最近视频都加了 object-fit: cover;这个作用是什么呢。 花飞飞 发表于 2024-11-7 19:41
最近几个视频都有些特别，
没有滤镜设置，也没有透明度，
只用径向渐变去掉中间LOGO,同时透出下方背景图 ...
这个一直都有的：视频适应尺寸，这和背景的 cover 一个道理 马黑黑 发表于 2024-11-7 19:43
这个一直都有的：视频适应尺寸，这和背景的 cover 一个道理
矮油，翻了一下还真的一直都有~~
之前用得各种参数多，就只管滤镜，透明度啥的{:4_173:}
最近几个视频选得都挺好，处理的特别，天天用的愣是看出不一样的东西来