听风【TO:小九】（学习黑师《你的直觉》充电小播效果）
本帖最后由 花飞飞 于 2023-8-14 12:29 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 731px); width: 1300px; height: 693px; background: url('https://pic.imgdb.cn/item/64d981bf1ddac507cc81b71f.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }#papa::before, #papa::after { position: absolute; content: ''; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.6); animation: fade 6s infinite alternate var(--state); }
#papa::before { left: 260px; bottom: 60px; }
#papa::after { width: 60px; height: 60px; left: 280px; bottom: 90px; }
@keyframes fade { from { opacity: .6; } to { opacity: .1; } }
#vid {
position: absolute;
width: 120%;
height: 110%;
top:-10px;
left:-10px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .36;
}</style><div id="papa"><video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/25/51/62417fd483ea3.mp4" autoplay="" loop="" muted=""></video><span id="myclone"></span></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=2063486984" autoplay="" loop=""></audio><script>(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/charger_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
window.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: `
bottom: 30px;
right: 50px;
color: #F5DEB3;
--bg: linear-gradient(Tan,Sienna);
`,
player_css: `
bottom: 120px;
left:60px;
z-index: 12;
--track: transparent;
--prog: Tan;
--ww: 300px;
--hh: 26px;
`,
fs_css: 'left: -120px;',
});
};
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);</script>
@小九 好久没看到小九了，喊一喊 。。。 九近来忙不？一起听歌哈。。。{:4_208:} @马黑黑 昨天完成的作业，黑师也过了目。。。{:4_170:}应该没什么问题了吧。。 刀神最新专辑里的一曲，未来的底片。。。 这个漂亮。飞飞的字体是特地设计的吧，和这个充电器播放器如此匹配，太赞了{:4_199:} 这画面制作也好美。这个帖子太棒了。九儿收礼开心{:4_187:} 花飞飞 发表于 2023-8-14 09:31
@马黑黑 昨天完成的作业，黑师也过了目。。。应该没什么问题了吧。。
大问题没有。小问题有一个：帖子居中。
帖子居中，有一个算法，通过 margin 设置外边距来实现：
margin: 0 0 0 calc(50% - 帖子宽度 / 2 - 81px);
css 的 calc 函数在上面语句中，用于设置左边外边距，比方说，帖子的宽度是 1200px，则上句写成：
margin: 0 0 0 calc(50% - 681px);
注意，calc() 函数里面的运算符，比如上句中的减号，两边都必须留有一个空格！ 红影 发表于 2023-8-14 10:07
这个漂亮。飞飞的字体是特地设计的吧，和这个充电器播放器如此匹配，太赞了
{:4_187:}看到这个字体有点闪电的样子就用上了。 红影 发表于 2023-8-14 10:07
这画面制作也好美。这个帖子太棒了。九儿收礼开心
{:4_187:}谢谢影子鼓励。。。 马黑黑 发表于 2023-8-14 12:06
大问题没有。小问题有一个：帖子居中。
帖子居中，有一个算法，通过 margin 设置外边距来实现：
这个公式我也得记下来。。。这回的图宽1300的是突然改小的，就凭感觉调了一下居中。。。 马黑黑 发表于 2023-8-14 12:06
大问题没有。小问题有一个：帖子居中。
帖子居中，有一个算法，通过 margin 设置外边距来实现：
现在算是改好了~~公式比眼睛精准。。。。。
现在我发现我之前1500的贴子都用的830，实际应是831{:4_170:} 马黑黑 发表于 2023-8-14 12:06
大问题没有。小问题有一个：帖子居中。
帖子居中，有一个算法，通过 margin 设置外边距来实现：
练习抄代码的时候发现，不光是减号，还有 = 也是两边都要有空格。。感觉没错吧。。 飞飞，你出图速度的，眨眼就出来了，而且这么漂亮，学习的制图心得也是要介绍一下了{:4_178:} 欣赏飞飞的精彩制作{:4_199:} 小九收礼开心@小九 小辣椒 发表于 2023-8-14 12:36
飞飞，你出图速度的，眨眼就出来了，而且这么漂亮，学习的制图心得也是要介绍一下了
{:4_170:}介绍啥心得啊。。。好容易把这些图整在一起，累得我一身汗。。
栅栏一张图，一张带纸纹的背景图，一个抠得S去活来的小美人儿。。。三张图融在一起。。
听风和边上的两行小字，是硬贴在纸上的，印章现在看来有点正，应该再拉一丢丢。。
下方的英文字母是现成的字体。。。
没了。。 小辣椒 发表于 2023-8-14 12:41
欣赏飞飞的精彩制作
新手做的图真的会有许多不足，待我慢慢发现。。。慢慢改正。。{:4_170:} 花飞飞 发表于 2023-8-14 12:55
介绍啥心得啊。。。好容易把这些图整在一起，累得我一身汗。。
栅栏一张图，一张带纸纹的背景 ...
我手机可以拉大界面看，你三个图融合的很好 花飞飞 发表于 2023-8-14 12:56
新手做的图真的会有许多不足，待我慢慢发现。。。慢慢改正。。
会发现，会改正就是在进步了。。。飞飞的进步速度惊人