论坛 › 动画音画 › 【黑师代码】人间浪漫（学习黑师《one》渐变花背景和歌词图片背景效果）

南无月 发表于 2024-2-29 17:17

【黑师代码】人间浪漫（学习黑师《one》渐变花背景和歌词图片背景效果）

<style>
#papa {
        margin: 130px 0 20px calc(50% - 931px);
        width: 1700px;
        height: 900px;
        background: url('https://pic.imgdb.cn/item/65b5e53a871b83018aef7f1e.webp') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        overflow: hidden;
        z-index: 1;
        transition: filter .75s;
        display: grid;
        place-items: center;
        position: relative;
}
#papa::after {
        position: absolute;
        content: url('https://pic.imgdb.cn/item/65b5f319871b83018a1de0dc.gif');
        opacity: .32;
        right: 1px;
        top: 40px;
        mask: linear-gradient(to top, transparent 10%, red 65%, red 0);
        -webkit-mask: linear-gradient(to top, transparent 10%, red 65%, red 0);
        mix-blend-mode: multiply;
}
#papa:hover { filter: brightness(80%); }
.ipic { position: absolute; z-index: 10;mix-blend-mode: normal; animation: rotating 6s infinite var(--state); }
#papa video {
        position: absolute;
        width: 1100px;
        height: 650px;
        left:16px;
        bottom:100px;
        object-fit: cover;

        pointer-events: none;
        opacity: .99;
        object-fit: cover; aspect-ratio: 1;
}
</style>

<div id="papa">
<img class="ipic" alt="" src="https://pic.imgdb.cn/item/65b605b9871b83018a61cb3e.png" />
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2106791516" autoplay="" loop=""></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2405179/00/02/38/5b5ecc0d8d257.mp4" muted loop></video>
</div>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
        script.charset = 'utf-8';
        document.head.appendChild(script);
        let geci= [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        script.onload = () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: geci,
                        lrc_css: 'top: 20px;z-index: 12; color: rgba(250,250,250,.4); --bg: url("https://638183.freep.cn/638183/small/002.png");',
                        fs_css: 'bottom: 20px; left:-220px; color: #eee; background: transparent;',
                        player_css: `
                                bottom: 80px;
                                right: 260px;
                                z-index: 11;
                                border-width: 0;
                                color: #fff;
                                --size: 240px;
                                --bRad: 50%;
                                --track: gray;
                                --prog: lightblue;
                                --btnBg:url('https://pic.imgdb.cn/item/65b60611871b83018a62fd59.gif') no-repeat center/cover;
                        `,
                });
        };
        setInterval(() => aud.paused ? vid.pause() : vid.play());
})();
</script>
<Br><Br><Br><Br><Br><Br>

小辣椒 发表于 2024-2-29 20:16

欣赏月月的精美图图，这个小播放器也是做的特别的漂亮，小辣椒也是很喜欢的，玩过好几次了

小辣椒 发表于 2024-2-29 20:18

月月好制作，月月脑子也是特别好，勤劳的小蜜蜂，每天都有新的制作{:4_178:}

红影 发表于 2024-2-29 21:04

那个小按钮很灵动。视频也加得很美妙。月儿的帖子让人满满的美的享受呢{:4_199:}

红影 发表于 2024-2-29 21:06

又是漂亮的字体制作，还有PS图层不同透明度的设置，让一切融合得那么美妙。{:4_199:}
右上角的飘飞的雁儿也很有韵味呢。

马黑黑 发表于 2024-2-29 21:22

人间浪漫，戴个手镯{:4_170:}

冬天的雨 发表于 2024-2-29 22:16

问好南无月，背景图图大气，灵动，标题字设计漂亮，欣赏精彩制作

小文 发表于 2024-3-1 14:30

好美

南无月 发表于 2024-3-1 20:05

小辣椒 发表于 2024-2-29 20:16
欣赏月月的精美图图，这个小播放器也是做的特别的漂亮，小辣椒也是很喜欢的，玩过好几次了

这个直接套用的。换了个底图{:4_173:}

南无月 发表于 2024-3-1 20:06

小辣椒 发表于 2024-2-29 20:18
月月好制作，月月脑子也是特别好，勤劳的小蜜蜂，每天都有新的制作

{:4_170:}跟你一样用旧图。。因近来极忙，发的多数是旧贴

南无月 发表于 2024-3-1 20:06

红影 发表于 2024-2-29 21:04
那个小按钮很灵动。视频也加得很美妙。月儿的帖子让人满满的美的享受呢

影子夸了就十分开心啦{:4_187:}乐一个。。

南无月 发表于 2024-3-1 20:07

红影 发表于 2024-2-29 21:06
又是漂亮的字体制作，还有PS图层不同透明度的设置，让一切融合得那么美妙。
右上角的飘飞的雁儿 ...

{:4_187:}影子总能看到很多细节之处，真是太贴心了。。

南无月 发表于 2024-3-1 20:08

马黑黑 发表于 2024-2-29 21:22
人间浪漫，戴个手镯

我知道你看到手镯在想什么。。跟浪漫不搭边是吧。。。你这职业偏思维。。{:4_170:}

南无月 发表于 2024-3-1 20:09

马黑黑 发表于 2024-2-29 21:22
人间浪漫，戴个手镯

或者这才是最浪漫的事情啊。。{:4_173:}

南无月 发表于 2024-3-1 20:09

冬天的雨 发表于 2024-2-29 22:16
问好南无月，背景图图大气，灵动，标题字设计漂亮，欣赏精彩制作

感谢冬天的雨支持鼓励哦。。{:4_187:}

南无月 发表于 2024-3-1 20:10

小文 发表于 2024-3-1 14:30
好美

感谢小文临贴支持。。

马黑黑 发表于 2024-3-1 20:44

南无月 发表于 2024-3-1 20:09
或者这才是最浪漫的事情啊。。

应该是的

马黑黑 发表于 2024-3-1 20:44

南无月 发表于 2024-3-1 20:08
我知道你看到手镯在想什么。。跟浪漫不搭边是吧。。。你这职业偏思维。。

{:4_203:}

南无月 发表于 2024-3-1 20:53

马黑黑 发表于 2024-3-1 20:44
应该是的

那老师做的这串手镯就是人间最浪漫的{:4_170:}

南无月 发表于 2024-3-1 20:54

马黑黑 发表于 2024-3-1 20:44


我错了，我收回。。{:4_170:}

查看完整版本: 【黑师代码】人间浪漫（学习黑师《one》渐变花背景和歌词图片背景效果）