刀郎-花妖（学习黑师《山歌寥哉》线状小播拉幕效果）
本帖最后由 花飞飞 于 2023-8-7 11:22 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 830px); width: 1500px; height: 800px; background: url('https://pic.imgdb.cn/item/64cf9d311ddac507ccdd9431.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; z-index: 1; position: relative; overflow: hidden;--state: running; }
#papa::before, #papa::after { position: absolute; content: ''; width: 10px; height:60px; bottom:35px; border-radius: 50%;
-webkit-box-reflect: below 1080px linear-gradient(to bottom, transparent, rgba(255,255,255,.5)); animation: change 10s infinite alternate var(--state); }
#papa::before { right: 960px; background: repeating-linear-gradient(to left,rgba(255,255,255,.4),rgba(255,255,255,.4) 5px,transparent 5px,transparent 10px); }
#papa::after { left: 960px; background: repeating-linear-gradient(to right,rgba(255,255,255,.4),rgba(255,255,255,.4) 5px,transparent 5px,transparent 10px); }
@keyframes change { to { width: 600px; } }
#vid {
position: absolute;
width: 120%;
height: 110%;
top:-10px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .25;
}
</style>
<div id="papa"><video id="vid" src="https://img.tukuppt.com/video_show/2916847/00/17/74/5ecde0e1dda97.mp4" autoplay="" loop="" muted=""></video></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2063486974" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/huakuai_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
window.onload = () => {
HCPlayer({
papa: '#papa', /* 宿主元素 */
lrcAr: geci, /* 歌词 */
lrc_css: `
bottom: 20px; /* 位置 */
font: bold 30px/38px sans-serif;
color: lightblue; /* 歌词底色 */
-webkit-box-reflect: below 540px linear-gradient(to bottom, transparent, rgba(255,255,255,.5));
--bg: DarkGray;/* 歌词同步颜色 */
`,
player_css: `
bottom: 80px; /* 位置 */
color: #fff; /* 文本颜色 */
-webkit-box-reflect: below 400px linear-gradient(to bottom, transparent, rgba(255,255,255,.5));
--track: lightblue; /* 底轨颜色 */
--prog: DarkGray; /* 进度颜色 */
--ww: 300px; /* 示波宽度 */
--slider: orange;
`,
});
}
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
@马黑黑 图片压缩实例，目前大小只有102K。。。看看现在会不会秒开。。 刚准备下，看见了飞飞的精彩制作，惊叹的{:4_178:} 图图的制作学习是神15的速度了，想当初我是学习了蛮久还是小白一个{:4_201:} 特别这标题字出彩{:4_199:} 先下，明天晚上再上来看看黑黑的教程 小辣椒 发表于 2023-8-6 21:49
特别这标题字出彩
去源文件查了一下，叶根友钢笔行书升级版。。。我液化稍加了个尾巴。。{:4_170:} 小辣椒 发表于 2023-8-6 21:49
图图的制作学习是神15的速度了，想当初我是学习了蛮久还是小白一个
{:4_173:}好不好先涂再说。。刚开始都是毁图 小辣椒 发表于 2023-8-6 21:48
刚准备下，看见了飞飞的精彩制作，惊叹的
{:4_170:}我刚被你的贴子惊叹到……你是真高手。。 小辣椒 发表于 2023-8-6 21:50
先下，明天晚上再上来看看黑黑的教程
{:4_187:}晚安哈。。 飞飞把拉幕做成了椭圆形，还改变了方向。漂亮。
图片也漂亮，那些迷离的光影，还有字体也很别致，除了标题字的飘逸，下面的小字像是带了立体呢。真棒{:4_199:} 花飞飞 发表于 2023-8-6 21:23
@马黑黑 图片压缩实例，目前大小只有102K。。。看看现在会不会秒开。。
这样挺好了。一般地，除非图片所在浏览器非常强劲，不然呢，尽可能将图片控制在200Kb左右 醉美水芙蓉 发表于 2023-8-6 22:06
飞飞越来越厉害了，图图美美哒！代码娴熟！
{:4_187:}谢谢水芙蓉的鼓励和肯定哦 红影 发表于 2023-8-6 22:16
飞飞把拉幕做成了椭圆形，还改变了方向。漂亮。
图片也漂亮，那些迷离的光影，还有字体也很别致，除了标题 ...
影子厉害，看得好细致，下面的小字加了浮雕效果，有点点立体……{:4_187:} 马黑黑 发表于 2023-8-6 22:37
这样挺好了。一般地，除非图片所在浏览器非常强劲，不然呢，尽可能将图片控制在200Kb左右
我终于知道你要求这么高是因为真的可以做到。。。{:4_199:} 花飞飞 发表于 2023-8-7 10:10
我终于知道你要求这么高是因为真的可以做到。。。
玩前端的，这些道理要懂 马黑黑 发表于 2023-8-7 12:05
玩前端的，这些道理要懂
{:4_181:}点头同意……虽然我不是前端玩家，抄代码做贴也算沾边……{:4_173:} 花飞飞 发表于 2023-8-7 10:09
影子厉害，看得好细致，下面的小字加了浮雕效果，有点点立体……
应该是飞飞厉害，我都不懂怎样弄出浮雕效果，只是欣赏这样美妙的效果啊{:4_173:} 红影 发表于 2023-8-7 16:09
应该是飞飞厉害，我都不懂怎样弄出浮雕效果，只是欣赏这样美妙的效果啊
我刚入门，太一般般。。
这个是PS图层样式里的~~
影子如果有时间看，是分分钟秒掉的事儿。。。{:4_173:}