红影 发表于 2024-12-7 15:06

《雪落人间》(学习黑黑《菩萨吟》代码效果)


<style>
        @import 'https://638183.freep.cn/638183/web/mod/anklet_lrc.css';
        #pa { margin: 60px 0 30px calc(50% - 721px); width:1280px; height: 720px; background: url('https://pic.imgdb.cn/item/67530a15d0e0a243d4deff90.jpg') no-repeat center/cover; }
        #mplayer { width: 220px; height: 220px; color: snow; left: 30%; bottom: 5%; --color1: white; --color2: LightSkyBlue; --prog: DeepSkyBlue; --track: white; --bRad: 50% 80%; --btnBg: url('https://pic.imgdb.cn/item/675314fcd0e0a243d4df0160.png') center/cover; }
        #mplayer::after{ width: 100px; height: 100px; top: calc(50% - 85px); }
        #playprog { top: 60%; height: 60px; width: 60%; }
        .vid { mix-blend-mode: screen; webkit-mask: radial-gradient(red 20%, transparent); -webkit-mask: radial-gradient(red 20%,transparent); }
        #lrc { bottom: 80px; right: 15%; font: bold 2.4em FZYaoti; --bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(195, 100%, 50%, .75)); color: hsl(240, 10%, 90%); filter: drop-shadow(1px 1px 1px hsla(0, 0%, 100%, .95));}
        #fsbtn { right: 360px; bottom: 20px; }

</style>

<div id="pa" class="pa">
        <audio src="https://music.163.com/song/media/outer/url?id=2075599922"></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b86e6c5bf_10s_big.mp4" autoplay loop muted></video>
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/anklet_lrc.js';
var geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
hcplay(pa, geci);
fscreen.fs(pa, fsbtn);
</script>

红影 发表于 2024-12-7 15:07

把能调的都做了些调整,主要学习一下封装里的内容,这样以后可以直接使用封装,也知道怎样调了{:4_187:}

红影 发表于 2024-12-7 15:08

感谢@马黑黑 带来的精彩代码{:4_187:}

梦油 发表于 2024-12-7 15:35

仿佛是走进了雪乡,真美!

起个网名好难 发表于 2024-12-7 15:53

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

花飞飞 发表于 2024-12-7 18:35

这个雪景太漂亮了吧,
影子真是配色大师~~对美感的把握非同一般~~
小播色彩和歌词色彩搭得绝妙,赞叹。。{:4_187:}{:4_199:}

花飞飞 发表于 2024-12-7 18:40

按纽样式像雪花,特别好看,
进度条也换成了蓝色,
链珠调完之后,看着质地如青玉~~
还有给歌词加了阴影,看上去很有立体感。。{:4_187:}

花飞飞 发表于 2024-12-7 18:41

问好影子,周末快乐。。
这个贴子意境太美了,大爱大赞。。{:4_204:}

马黑黑 发表于 2024-12-7 18:53

红影 发表于 2024-12-7 15:07
把能调的都做了些调整,主要学习一下封装里的内容,这样以后可以直接使用封装,也知道怎样调了

这个调整的动作和幅度还是挺大的,厉害

红影 发表于 2024-12-7 20:35

梦油 发表于 2024-12-7 15:35
仿佛是走进了雪乡,真美!

正好是冬天,先在贴子里下点雪{:4_173:}

红影 发表于 2024-12-7 20:35

起个网名好难 发表于 2024-12-7 15:53


谢谢难难鼓励{:4_187:}

红影 发表于 2024-12-7 20:37

花飞飞 发表于 2024-12-7 18:35
这个雪景太漂亮了吧,
影子真是配色大师~~对美感的把握非同一般~~
小播色彩和歌词色彩搭得绝妙,赞叹。。 ...

被飞飞说得都不好意思了,也没调几个颜色,大都用原来颜色了,只调了几个效果就同,还是黑黑的原本配色更好呢{:4_204:}

红影 发表于 2024-12-7 20:38

花飞飞 发表于 2024-12-7 18:40
按纽样式像雪花,特别好看,
进度条也换成了蓝色,
链珠调完之后,看着质地如青玉~~


按钮倒是找了几个,换来换去,还是觉得这个亮堂点。
钢柱我好像置换了颜色2,1还是用的原来的。谢谢飞飞夸奖{:4_185:}

红影 发表于 2024-12-7 20:39

花飞飞 发表于 2024-12-7 18:41
问好影子,周末快乐。。
这个贴子意境太美了,大爱大赞。。

问好飞飞,有飞飞喜欢真的太开心了{:4_205:}

红影 发表于 2024-12-7 20:40

马黑黑 发表于 2024-12-7 18:53
这个调整的动作和幅度还是挺大的,厉害

把想试验的都试了一下,边做边是为了学习呢。{:4_187:}

马黑黑 发表于 2024-12-7 20:41

红影 发表于 2024-12-7 20:40
把想试验的都试了一下,边做边是为了学习呢。

模块的东东也没啥可学,按模块的约定做就好

起个网名好难 发表于 2024-12-7 20:42

红影 发表于 2024-12-7 20:35
谢谢难难鼓励

想借你的帖子做试验结果硬是搞不定{:5_102:}

红影 发表于 2024-12-7 20:49

马黑黑 发表于 2024-12-7 20:41
模块的东东也没啥可学,按模块的约定做就好

也要去熟悉那些约定啊,其实只用默认的就很漂亮了呢{:4_187:}

红影 发表于 2024-12-7 20:50

起个网名好难 发表于 2024-12-7 20:42
想借你的帖子做试验结果硬是搞不定

不知难难指什么内容的试验,我们可以一起探讨啊{:4_204:}

马黑黑 发表于 2024-12-7 20:51

红影 发表于 2024-12-7 20:49
也要去熟悉那些约定啊,其实只用默认的就很漂亮了呢

对。不过总得有点个性化,或根据帖子情形做些调整。
页: [1] 2 3 4 5 6 7
查看完整版本: 《雪落人间》(学习黑黑《菩萨吟》代码效果)