安静的时光（学习黑师《无罔》圆形直条&斜条频谱封装效果）
<style>.mydiv { margin: 0 0 0 calc(50% - 720px); display: grid; place-items: center; width: 1300px; height: 700px; background: lightblue url('https://s1.ax1x.com/2023/07/29/pPSHH91.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; --state: running; }
.mydiv::before,.mydiv::after { position: absolute; left: 0px; top: 0px; content: url('https://638183.freep.cn/638183/t22/gif/127.gif'); mix-blend-mode: screen;offset-path: path('M-20,500 L130,440 L220,550 L370,440 L470,300 L520,590 L600,520 L850,430 L980,500'); animation: move 160s var(--delay) infinite var(--state); --delay: 0s; }
.mydiv::after { --delay: -80.3s; }
@keyframes move { from {offset-distance: 0%; } to { offset-distance: 100%; } }
#vid {
position: absolute;
width: 120%;
height: 110%;
top:-10px;
left:-50px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .35;
}
</style>
<div class="mydiv"><video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/77/5b4a08ff01196.mp4" autoplay="" loop="" muted=""></video></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=865632948.mp3" loop autoplay></audio>
<script >
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/pinpuz_lrc.js';
document.head.appendChild(script);
(function() {
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
window.onload = () => {
HCPlayer({
papa: `.mydiv`,
lrcAr: lrcAr,
lrc_css: `
bottom: 15px;
color: snow;
`,
player_css: `
color: snow;
bottom: 148px;
left:209px;
--len: 2px;
`,
pinpu_num: 60,
});
}
})();
document.querySelector('.mydiv').onclick = () => aud.paused ? vid.pause() : vid.play();
</script>
@马黑黑 好久没交作业了，先完成一贴交上来。。{:4_204:} @小辣椒 谢谢你的GIF动图{:4_187:} @千羽 羽老师，你给的教程反复在看，渐渐看得懂一些了。。。作业还不成熟……继续学习中……{:4_183:} {:4_174:} 马黑黑 发表于 2023-7-29 20:16
巴适得板 花飞飞 发表于 2023-7-29 20:43
巴适得板
俺家乡话 醉美水芙蓉 发表于 2023-7-29 20:47
图图做得漂亮！
学你的，找美人儿~~你的美人儿素材好多，哪来的？{:4_170:} 马黑黑 发表于 2023-7-29 20:52
俺家乡话
你家乡话出圈了。。。美不美家乡水……………… 那些条纹以为是代码，后来以为是动图，去看代码才知道是视频{:4_173:} 底图制作好美，溶图很自然。这个封装效果也好美。欣赏飞飞好帖{:4_199:} 红影 发表于 2023-7-29 21:04
那些条纹以为是代码，后来以为是动图，去看代码才知道是视频
恩哪，我一向喜欢加这些布灵布灵的{:4_170:} 红影 发表于 2023-7-29 21:05
底图制作好美，溶图很自然。这个封装效果也好美。欣赏飞飞好帖
{:4_187:}感谢影子鼓励 花飞飞 发表于 2023-7-29 20:56
你家乡话出圈了。。。美不美家乡水………………
亲不亲自家人 好美啊，飞飞的制作太亮眼了，{:4_187:}真好 飞飞这图也是看点多多，越看越美啊{:4_187:} 花飞飞 发表于 2023-7-29 19:28
@千羽 羽老师，你给的教程反复在看，渐渐看得懂一些了。。。作业还不成熟……继续学习中……
飞飞，别叫老师哈，否则会让人挺尴尬的，{:4_201:} 花飞飞 发表于 2023-7-29 19:28
@千羽 羽老师，你给的教程反复在看，渐渐看得懂一些了。。。作业还不成熟……继续学习中……
只是希望别误导了，俺也是在学习中{:4_201:} 千羽 发表于 2023-7-29 22:17
只是希望别误导了，俺也是在学习中
教程十分有用，音画教程的溶图过程十分详细，现在好歹能看懂了。。哪里会误导，引路人。。{:4_183:}