红影 发表于 2025-3-9 11:30

《漂浮》TO马黑黑（学习黑黑《燃烧》帖子代码）


<style>
    @import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css?v=1.0';
    #tz { --bottom: 100%; margin: 30px 0 30px calc(50% - 593px); background: url('https://pic1.imgdb.cn/item/67ccfcc6066befcec6e177d0.jpg') no-repeat center/cover; overflow: hidden;border-radius:20px; }
    #tz:hover { --bottom: 10px; }
    @media screen and (max-width: 1025px) { #tz { transform: scale(.9); } }
    #mplayer { width: 40%; bottom: var(--bottom); background: none; box-shadow: none; color: snow; }
    #mplayer img { filter: invert(.8); filter: hue-rotate(20deg); }
    #fsbtn { bottom:10%; left: 90%; border-color: snow; color: snow; }
    #vid { position: absolute; width: 100%;height: 100%; opacity: .35; object-fit: cover; pointer-events: none; mask: linear-gradient(to top right,red 90%, transparent 60%); -webkit-mask: linear-gradient(to top right,red 90%, transparent 60%); pointer-events: none; mix-blend-mode: screen; }
        #vid:nth-of-type(2) { opacity: 1; width: 110%; height: 100%; left: -80px; mix-blend-mode: normal; mask: linear-gradient(to top right,red 90%, transparent 10%); -webkit-mask: linear-gradient(to top right,red 90%, transparent 10%); mix-blend-mode: screen; }
    #lrc { bottom: 60px; font: bold 36px/40px FZShuTi; color:Lavender;--bg: linear-gradient(180deg, rgba(86,242,38,.65), rgba(161,252,181,.85)); }
</style>

<div id="tz" class="pa">
    <audio src="https://music.163.com/song/media/outer/url?id=1983602282"></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/05/5b4ffd401d669.mp4" autoplay loop muted></video>
    <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/31/09/62d0fc44531b6_10s_big.mp4" autoplay loop muted></video>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js?v=1.0';
       var gc = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
       hcplay(tz, null, gc);
</script>

红影 发表于 2025-3-9 11:31

弄个比较明亮的背景，祝福黑黑春天快乐。@马黑黑 {:4_187:}

红影 发表于 2025-3-9 11:33

黑黑的《燃烧》还带媒体查询功能呢，跟着照猫画虎{:4_173:}

红影 发表于 2025-3-9 11:34

去做了才发现，为什么在tz里设置了--bottom: 100%; ？明明那个播放器是从上面下来的啊？

马黑黑 发表于 2025-3-9 11:55

这是祝俺三九男人节快乐！谢谢

红影 发表于 2025-3-9 12:36

马黑黑 发表于 2025-3-9 11:55
这是祝俺三九男人节快乐！谢谢

还有这个节日么，看得笑喷{:4_170:}

梦江南 发表于 2025-3-9 13:40

《燃烧》原来还可以这做。

梦江南 发表于 2025-3-9 13:41

好影子，欣赏学习了。{:4_187:}

杨帆 发表于 2025-3-9 13:45

漂亮！谢谢影子精彩分享{:4_204:}

红影 发表于 2025-3-9 13:46

梦江南 发表于 2025-3-9 13:40
《燃烧》原来还可以这做。

这个和《燃烧》没什么区别的啊，基本是套用代码呢{:4_173:}

红影 发表于 2025-3-9 13:46

梦江南 发表于 2025-3-9 13:41
好影子，欣赏学习了。

谢谢江南鼓励{:4_187:}

红影 发表于 2025-3-9 13:47

杨帆 发表于 2025-3-9 13:45
漂亮！谢谢影子精彩分享

谢谢杨帆，感谢鼓励{:4_187:}

梦江南 发表于 2025-3-9 15:14

红影 发表于 2025-3-9 13:46
这个和《燃烧》没什么区别的啊，基本是套用代码呢

我已套用了。{:4_173:}

梦江南 发表于 2025-3-9 15:16

红影 发表于 2025-3-9 13:46
谢谢江南鼓励

谢谢您漂亮的音画分享。{:4_204:}

红影 发表于 2025-3-9 16:11

梦江南 发表于 2025-3-9 15:14
我已套用了。

好啊，我们一起学习{:4_187:}

红影 发表于 2025-3-9 16:11

梦江南 发表于 2025-3-9 15:16
谢谢您漂亮的音画分享。

哪里，这是黑黑的代码呢{:4_173:}

南无月 发表于 2025-3-10 20:20

仙气飘飘的，灵气十足

红影 发表于 2025-3-10 20:34

南无月 发表于 2025-3-10 20:20
仙气飘飘的，灵气十足

谢谢南无月鼓励，就是完成个作业呢{:4_173:}

绿叶清舟 发表于 2025-3-11 21:35

制作漂亮，有马不骑光看干吗{:4_189:}

红影 发表于 2025-3-11 22:06

绿叶清舟 发表于 2025-3-11 21:35
制作漂亮，有马不骑光看干吗

这是白马啊，黑黑喜欢骑黑马{:4_189:}
页: [1] 2 3
查看完整版本: 《漂浮》TO马黑黑（学习黑黑《燃烧》帖子代码）