焱鑫磊 发表于 2023-8-19 23:40

《把你带回我的草原》乌兰

本帖最后由 焱鑫磊 于 2023-8-21 14:35 编辑 <br /><br /> <style>
#papa { margin: 100px 0 0 calc(50% - 681px); width: 1200px; height: 675px; background: url('https://pic.imgdb.cn/item/64e0e1c6661c6c8e5451f5f9.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; z-index: 1; position: relative; --state: running; overflow: hidden; }
#vid { position: absolute; width: 100%; height: 110%; top:-10%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; opacity: .35; }
.txt{position: absolute; left: 8%; top: 76%; --c: #B5DFED;--w1: radial-gradient(100% 57% at top ,#0000 100%,var(--c) 100.5%) no-repeat;--w2: radial-gradient(100% 57% at bottom, var(--c) 100%,#0000 100.5%) no-repeat;background: var(--w1),var(--w2),var(--w1),var(--w2);background-position-x: -200%, -100%, 0%, 100%;background-position-y: 100%;background-size: 50.5% 100%;animation: m 2s infinite linear var(--state);font-size: 55px;font-weight: bold;color: transparent;-webkit-background-clip: text; -webkit-text-stroke: 2px var(--c); }
@keyframes m {0%{background-position-x:-200%, -100%, 0%, 100%}100%{background-position-x:0%, 100%, 200%, 300%} }
</style>

<div id="papa"><video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/25/51/6241876f98a30_10s_big.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div class="txt">把你带回我的草原</div></div>
<audio id="aud" src="https://www.joy127.com/url/106889.mp3" autoplay loop></audio>
<script>
(function() {
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/meter_pinpu_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);
let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
    window.onload = () => {
      HCPlayer({
            papa: '#papa',
            lrcAr: geci,
            lrc_css: `
                top: 20px;               
                color: lightblue;
                --bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
            `,
            player_css: `
                bottom: 10px;
                left: 130px;
                color: snow;
            `,
            /* 频谱设置 num - 频谱数; width - 频谱条宽; color - 频谱条颜色（不要 color 则去随机颜色）*/
            pinpu: { num: 40, width: 3, color: 'rgba(100,200,250,.5)' },
      });
    }
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

红影 发表于 2023-8-20 08:12

这个效果一看好熟悉啊，是我那个《别错过》的效果吧{:4_173:}
那个水波字可以试着改一下颜色，效果肯定更明显。
背景非常漂亮，欣赏焱鑫磊好帖{:4_199:}

焱鑫磊 发表于 2023-8-20 08:49

本帖最后由 焱鑫磊 于 2023-8-20 08:55 编辑

红影 发表于 2023-8-20 08:12
这个效果一看好熟悉啊，是我那个《别错过》的效果吧
那个水波字可以试着改一下颜色，效果肯定更 ...
没错，照抄作业。字体换颜色有不同效果。让它与频谱一样颜色吧。{:4_187:}

红影 发表于 2023-8-20 09:33

焱鑫磊 发表于 2023-8-20 08:49
没错，照抄作业。字体换颜色有不同效果。让它与频谱一样颜色吧。

对对，这个也没错。我的说法只是想让那水波更清楚点{:4_173:}

焱鑫磊 发表于 2023-8-20 10:04

红影 发表于 2023-8-20 09:33
对对，这个也没错。我的说法只是想让那水波更清楚点

那就必须用浅色的了。试试！

冬天的雨 发表于 2023-8-20 13:00

播放器和文字颜色一致，和背景图也是相配，焱鑫磊制作漂亮{:4_174:}

冬天的雨 发表于 2023-8-20 13:00

歌曲第一次听{:4_199:}

冬天的雨 发表于 2023-8-20 13:00

感谢分享{:4_187:}

红影 发表于 2023-8-20 13:47

焱鑫磊 发表于 2023-8-20 10:04
那就必须用浅色的了。试试！

好像这个颜色也不咋样，怪了，我也不知道什么样的颜色让这个水波看着更清楚了{:4_173:}

焱鑫磊 发表于 2023-8-21 10:24

冬天的雨 发表于 2023-8-20 13:00
播放器和文字颜色一致，和背景图也是相配，焱鑫磊制作漂亮

问候冬天的雨好{:4_187:}

焱鑫磊 发表于 2023-8-21 10:26

红影 发表于 2023-8-20 13:47
好像这个颜色也不咋样，怪了，我也不知道什么样的颜色让这个水波看着更清楚了

红影：把它设置成与文字同色吧。我试了有几十种颜色，都不理想。

焱鑫磊 发表于 2023-8-21 10:27

冬天的雨 发表于 2023-8-20 13:00
感谢分享

{:4_176:}

红影 发表于 2023-8-21 13:52

焱鑫磊 发表于 2023-8-21 10:26
红影：把它设置成与文字同色吧。我试了有几十种颜色，都不理想。

估计背景比较杂乱的缘故，还有种法子，就是把歌词放下来，把它放到右上角附近，应该效果就出来了。
呵呵，别折腾了，已经折腾了这么多遍了呢。焱鑫磊辛苦了{:4_187:}
页: [1]
查看完整版本: 《把你带回我的草原》乌兰