论坛 › 音乐沙龙 › 《安和桥》（学习黑黑《碧涧流泉》效果）

红影 发表于 2024-6-7 22:59

《安和桥》（学习黑黑《碧涧流泉》效果）

<style>
        #mydiv { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height:700px; background: url('https://pic.imgdb.cn/item/66607a725e6d1bfa05e78efb.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); overflow: hidden; z-index: 1; user-select: none; position: relative; }
        .nvhai { position: absolute; right: 200px; top: 286px; animation: ani 1.5s linear infinite alternate var(--state); }
        txt-box { position: absolute; display: grid; place-items: center; left: var(--xx); bottom: 240px;transform: rotate(10deg)；width: 70px; height: 70px; font: normal 46px sans-serif; color: LightSkyBlue; cursor: pointer; transition: .7s; animation: move .8s var(--delay) linear infinite alternate var(--state); }
        txt-box::after { position: absolute; content: ''; inset: -6px; border: thick outset SkyBlue; border-radius: 0 50%; animation: rot 5s var(--delay) linear infinite alternate var(--state); }
        txt-box:hover { filter: sepia(100%) drop-shadow(0 -80px 10px white); }
        .vid { position: absolute; object-fit: cover; }
      .vid:nth-of-type(1) { bottom: 0; width: 100%; height: calc(100% + 60px);mix-blend-mode: multiply; opacity: .95; pointer-events: none; }
      .vid:nth-of-type(2) { top: 262px; right: 10px; width: 320px; height: 160px; border-radius: 0 40% 0 0; transform: rotateY(180deg); mix-blend-mode: luminosity;filter: drop-shadow(0 0 10px GoldEnrod);transition: 2s; opacity: .25;}      
        @keyframes ani { from { transform: scale(.99); opacity: .2; } to { transform: scale(1.05); opacity: .9; } }       
        @keyframes move { to { bottom: 280px; } }
        @keyframes rot { to { transform: rotateX(360deg); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27646205" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/15653652/04/57/91/6490fef65a85f_10s_big.mp4" muted loop autoplay></video>
        <video class="vid" id="vbtn" src="https://img.tukuppt.com/video_show/2418175/00/08/32/5d1d48a2dcfcc_10s_big.mp4" autoplay loop muted disablePictureinPicture></video>
        <img class="nvhai" alt="" src="https://pic.imgdb.cn/item/666319ad5e6d1bfa05683ced.png" />
</div>

<script>
(function() {
        const ar = '安和桥'.split('');
        const total = ar.length, half = Math.floor(ar.length / 2), ww = 240;
        let tbAr = [];
        ar.forEach((t,k) => {
                let tbox = document.createElement('txt-box');
                tbox.textContent = t;
                tbox.style.cssText += `
                        --xx: ${ww / total * k + 560}px;
                        --delay: -${k < half ? k * 0.5 : (total - k) * 0.5}s;
                `;
                tbAr.push(tbox);
                mydiv.appendChild(tbox);
        });
        aud.onplaying = aud.onpause = () => {
                mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
                aud.paused ? vid.pause() : vid.play();
                tbAr.forEach(tb => tb.title = ['暂停','播放'][+aud.paused]);
        };
       
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () => {
        LRC({
                papa: '#mydiv',
                lrcAr: lrcAr,
                btn: 'txt-box',
                lrc_css: 'left: 460px; bottom: 50px; --bg: Lavender; color: RoyalBlue; font:bold 2.4em serif;',
        });
};
mydiv.oncontextmenu = (e) => e.preventDefault();
const lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
})();
</script>

红影 发表于 2024-6-7 23:03

想学习一下这个文字效果，改改弄弄又折腾挺长时间，不过总算弄好了。{:4_173:}
这个鼠标触碰变色和背景还挺搭，就没去改。谢谢@马黑黑 的代码{:4_187:}

马黑黑 发表于 2024-6-7 23:05

{:4_199:}

红影 发表于 2024-6-7 23:05

这首歌其实以前也听过，偶尔手机视频里看到那些让人破防的亲人离去的视频，配的就是这首歌，忽然觉得这歌很好听，然后就想做个帖子。视频里是女声唱的，帖子里想了想还是用原唱比较好。

红影 发表于 2024-6-7 23:08

最近总要外出，路上时间挺长，就全用来看手机了。有的时候路上时间长也不是坏事呢。
这世上没什么事是坏事，即使忙碌也总有欢乐的瞬间。人生不过是一场体验，各种酸甜苦辣遇到了就去细细咀嚼。

红影 发表于 2024-6-7 23:10

黑黑说过配色是大学问，我发现自己的配色很随意，没有事先想好的，都是跟着图图的色彩，往上靠而已{:4_173:}

朝云暮雨 发表于 2024-6-8 01:28

文字效果很好。炫！歌也很好听{:4_204:}

梦江南 发表于 2024-6-8 05:56

欣赏点赞！歌很好听。

樵歌 发表于 2024-6-8 08:49

对岸那个戴眼镜的学霸是师妹回忆花季的自己吧{:4_173:}

樵歌 发表于 2024-6-8 08:49

还在播放品隐藏有对岸树林里。

梦油 发表于 2024-6-8 10:52

颜色淡雅，显得很安静。

小辣椒 发表于 2024-6-8 13:15

亲爱的，厉害哦，这个效果整出来就是技术高超了，你的学习永远走在小辣椒前面的，太漂亮了{:4_178:}

小辣椒 发表于 2024-6-8 13:15

小辣椒就跟你后面抄作业了{:4_170:}

红影 发表于 2024-6-8 22:55

马黑黑 发表于 2024-6-7 23:05


这个还有很多问题，我直接用背景暂停了，文字的不知道怎样和歌词里的按钮对应上去。

红影 发表于 2024-6-8 22:55

朝云暮雨 发表于 2024-6-8 01:28
文字效果很好。炫！歌也很好听

谢谢云儿，我只是跟着学代码呢{:4_173:}

红影 发表于 2024-6-8 22:56

梦江南 发表于 2024-6-8 05:56
欣赏点赞！歌很好听。

谢谢梦江南鼓励，我也觉得这歌挺好听的呢{:4_173:}

红影 发表于 2024-6-8 22:57

樵歌 发表于 2024-6-8 08:49
对岸那个戴眼镜的学霸是师妹回忆花季的自己吧

不是啊，想用那个呼应歌曲里的回忆场景{:4_173:}

红影 发表于 2024-6-8 22:58

樵歌 发表于 2024-6-8 08:49
还在播放品隐藏有对岸树林里。

假设那是个记忆的播放机。

红影 发表于 2024-6-8 22:58

梦油 发表于 2024-6-8 10:52
颜色淡雅，显得很安静。

谢谢梦油，我是跟着学过代码呢{:4_187:}

红影 发表于 2024-6-8 22:59

小辣椒 发表于 2024-6-8 13:15
亲爱的，厉害哦，这个效果整出来就是技术高超了，你的学习永远走在小辣椒前面的，太漂亮了

哪里啊，这个也差不多是套用呢，黑黑有现成的代码啊{:4_173:}

查看完整版本: 《安和桥》（学习黑黑《碧涧流泉》效果）