花飞飞 发表于 2025-2-2 11:07

【黑师代码】媚黛

本帖最后由 花飞飞 于 2025-2-2 18:43 编辑 <br /><br /><style>
    @import 'https://638183.freep.cn/638183/web/css/audlrc.css';
    #mama { margin: 130px 0 30px calc(50% - 931px);width: 1700px;height: 900px; background: black url('https://642303.freep.cn/642303/tu/20250202meidai.webp') no-repeat center/ cover; overflow: hidden;}
    #player { width: 60px;height: 60px; }
    .player:nth-of-type(1) { right: calc(84% - 57px); top: calc(75% - 10px); filter: opacity(.999) blur(.5px); --du: 10s; }
    .player:nth-of-type(2) { width: 60px;height: 60px;right: 360px; top: 220px; filter: hue-rotate(30deg); --du: 10s; }
    .player:nth-of-type(3) { width: 60px;height: 60px;right: 120px; top: 360px; filter: hue-rotate(120deg); --du: 10s; }
    #player:hover { filter: hue-rotate(30deg); transition: .7s; }
    #prog { bottom: 20px; width: 220px; --bg1: Salmon; --bg2: Salmon; --color: Salmon;opacity: .36; }
#lrc {left: 50%;transform: translateX(-50%);bottom: 30px; --bg: linear-gradient(#ffffffaa,IndianRed); color:snow;font: bold 1.6em cursive;opacity: .66; }
    #vid{ position: absolute;
    width: 70%;
    height: 70%;
    bottom:-40px;
    left:-90px;   
    object-fit: cover;
    mix-blend-mode:screen;
    -webkit-mask: radial-gradient(circle,   cyan, cyan,rgba(0,0,0,.35),transparent, transparent,transparent, transparent);
    opacity: .36;}
   
</style>

<div id="mama" class="pa">
    <audio id="aud" src="http://music.163.com/song/media/outer/url?id=2669307352.mp3 "></audio>
    <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/21/07/08/16/28/54/video60e6b74618c00.mp4" autoplay loop muted></video>
    <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
    <img id="player" class="player" src="https://www.huachaowang.com/forum.php?mod=attachment&aid=NDY2MTZ8MTRiOTVjN2R8MTczODQ5Mjg5Mnw3Njc5fDc0Mzg3&noupdate=yes" alt="" />
    <img class="player" src="https://www.huachaowang.com/forum.php?mod=attachment&aid=NDY2MTZ8MTRiOTVjN2R8MTczODQ5Mjg5Mnw3Njc5fDc0Mzg3&noupdate=yes" alt="" />
    <img class="player" src="https://www.huachaowang.com/forum.php?mod=attachment&aid=NDY2MTZ8MTRiOTVjN2R8MTczODQ5Mjg5Mnw3Njc5fDc0Mzg3&noupdate=yes" alt="" />
    <div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>

<script type="module">
    import { Aud } from 'https://638183.freep.cn/638183/web/mod/audlrc.js';
var geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
    var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: geci };
    var audio = new Aud(mDatas);
    audio.play();
</script>

花飞飞 发表于 2025-2-2 11:09

@马黑黑 白老师瞧一眼这个构图，突然发现跟上一贴有点相似，思维定势了。。{:4_173:}

梦江南 发表于 2025-2-2 11:36

好漂亮的图图！新年快乐！

庶民 发表于 2025-2-2 11:41

不错的，欣赏。

红影 发表于 2025-2-2 12:19

漂亮的制作，字体设计也很漂亮。欣赏飞飞好帖{:4_187:}

马黑黑 发表于 2025-2-2 12:35

花飞飞 发表于 2025-2-2 11:09
@马黑黑 白老师瞧一眼这个构图，突然发现跟上一贴有点相似，思维定势了。。

习惯成自然，自然的就是好的

花飞飞 发表于 2025-2-2 18:43

梦江南 发表于 2025-2-2 11:36
好漂亮的图图！新年快乐！

感谢梦江南支持，新年快乐！

花飞飞 发表于 2025-2-2 18:43

庶民 发表于 2025-2-2 11:41
不错的，欣赏。

问好庶民，新年快乐~~

花飞飞 发表于 2025-2-2 18:44

红影 发表于 2025-2-2 12:19
漂亮的制作，字体设计也很漂亮。欣赏飞飞好帖

谢谢影子支持鼓励，又换了一个构图~~{:4_187:}

花飞飞 发表于 2025-2-2 18:47

马黑黑 发表于 2025-2-2 12:35
习惯成自然，自然的就是好的

第二稿换了构思，
第三稿按老师要求加了两朵小花~~
先说代码好用，
<img id="player" class="player" src="http://qslt.net/data/attachment/forum/202501/30/200424ip6c3e1g5pjgwgly.gif" alt="" />
这句设计的了扩展功能，用的时候才发现。。

花飞飞 发表于 2025-2-2 18:49

马黑黑 发表于 2025-2-2 12:35
习惯成自然，自然的就是好的


封装可以让小播这样灵活变动，真是超前设计。。

樵歌 发表于 2025-2-2 19:05

风格素雅，看着很养眼！

花飞飞 发表于 2025-2-2 19:18

樵歌 发表于 2025-2-2 19:05
风格素雅，看着很养眼！

感谢樵管支持鼓励~~新年好~~{:4_187:}

红影 发表于 2025-2-2 19:22

花飞飞 发表于 2025-2-2 18:44
谢谢影子支持鼓励，又换了一个构图~~

哇这个更清爽，太美了{:4_199:}

马黑黑 发表于 2025-2-2 20:23

花飞飞 发表于 2025-2-2 18:47
第二稿换了构思，
第三稿按老师要求加了两朵小花~~
先说代码好用，


你可以不用 id，有class就成了

花飞飞 发表于 2025-2-2 20:54

马黑黑 发表于 2025-2-2 20:23
你可以不用 id，有class就成了

原代码能不动就不动{:4_173:}

小辣椒 发表于 2025-2-2 21:44

飞飞很漂亮的图图，同色系背景最喜欢了{:4_199:}

小辣椒 发表于 2025-2-2 21:47

播放器3朵花花应该是联动效果的，你现在就一朵伞旁的小红花可以控制，是故意这样设置的吗

小辣椒 发表于 2025-2-2 21:48

感谢飞飞精彩分享，继续拜年！

马黑黑 发表于 2025-2-2 22:04

花飞飞 发表于 2025-2-2 20:54
原代码能不动就不动

不是这么说额。如果使用多个播放按钮，id都一样的话，会出错
页: [1] 2
查看完整版本: 【黑师代码】媚黛