红影 发表于 2023-8-28 09:13

《我把岁月酿成酒》翻唱：香染

<style>
#papa { margin: 100px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/64eb6943661c6c8e549fc1a2.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: .25; }
.txt{position: absolute; left: 14%; top: 62%; --c: #57260a;--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: 50px;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/2269348/00/14/14/5e1bbe9e8540e_10s_big.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div class="txt">翻唱欣赏</div>
</div>
<audio id="aud" src="https://yinyue1111.s3-us-east-1.ossfiles.com/wobasuiyueniangchengjiu.mp3" autoplay loop></audio>
<script>
(function() {
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/circle_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);
let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
   script.onload = () => {
      HCPlayer({
        papa: '#papa', /* 宿主元素 */
        lrcAr: geci, /* 歌词 */
        lrc_css: `
                top: 30px; left:80px;/* 歌词位置 */
                color: silver; /* 歌词底色 */
                --bg: linear-gradient(rgba(209,86,16,.4),rgba(209,86,16,.7));/* 歌词同步颜色 */
        `,
        player_css: `
                bottom: 30px; left:180px;
                --track: rgba(255,255,255,.6); /* 进度底色 */
                --prog: rgba(113,54,20,.9); /* 进度颜色 */
                --color: snow; /* 按钮和文本颜色 */
        `,
        fs_css: 'left: -100px; top: 10px; --color: #eee; --bg: #333;', /* 全屏按钮 */
      });
   };
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

红影 发表于 2023-8-28 09:16

做这个想让你知道，用代码可以随时让把自己的歌曲变成歌词同步。
而且那些复杂的JS都变成了插件，做起十分便捷。忽悠香宝赶紧一起学习代码@香染 {:4_173:}

红影 发表于 2023-8-28 09:17

发现这个圆环进度插件还没去学做过帖子呢，赶紧做个。谢谢黑黑的代码@马黑黑{:4_187:}

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

通过做帖，又可以多欣赏几遍香宝的演唱了，真好{:4_204:}

一朵梅 发表于 2023-8-28 09:22

爱学习的红影，我就来听歌赏景。{:4_180:}

红影 发表于 2023-8-28 09:41

一朵梅 发表于 2023-8-28 09:22
爱学习的红影，我就来听歌赏景。

是啊，那些打包好的插件我都想做一遍呢。{:4_173:}
问好梅儿，早上好{:4_204:}

梦油 发表于 2023-8-28 09:46

“翻唱欣赏”这几个字真好看，好像字里面装着水，咣咣铛铛的。

红影 发表于 2023-8-28 10:37

梦油 发表于 2023-8-28 09:46
“翻唱欣赏”这几个字真好看，好像字里面装着水，咣咣铛铛的。

这个效果上次用过，想起来了就再用一次{:4_173:}

东篱闲人 发表于 2023-8-28 10:51

俺大侄女成熟了，歌声和当年不一样了。。。{:4_204:}

红影 发表于 2023-8-28 10:55

东篱闲人 发表于 2023-8-28 10:51
俺大侄女成熟了，歌声和当年不一样了。。。

哈哈，什么时候成你大侄女了，我喊你东篱大哥的，岂不是要跟着长一辈了{:4_189:}

东篱闲人 发表于 2023-8-28 10:58

红影 发表于 2023-8-28 10:55
哈哈，什么时候成你大侄女了，我喊你东篱大哥的，岂不是要跟着长一辈了

很多年以前的事了。。。。。。

红影 发表于 2023-8-28 11:02

东篱闲人 发表于 2023-8-28 10:58
很多年以前的事了。。。。。。

不会是从前有座山，山里有座庙，，，的口诀吧{:4_173:}

东篱闲人 发表于 2023-8-28 11:03

红影 发表于 2023-8-28 11:02
不会是从前有座山，山里有座庙，，，的口诀吧

你猜。。。

山里人 发表于 2023-8-28 11:05

香染唱得真不错，是位大美女吧

亦是金 发表于 2023-8-28 11:13


香染唱得真好！欣赏了！{:4_187:}

醉美水芙蓉 发表于 2023-8-28 12:01

马黑黑 发表于 2023-8-28 12:21

红影 发表于 2023-8-28 09:17
发现这个圆环进度插件还没去学做过帖子呢，赶紧做个。谢谢黑黑的代码@马黑黑

这个是很多人喜欢的

红影 发表于 2023-8-28 13:08

东篱闲人 发表于 2023-8-28 11:03
你猜。。。

我哪猜的出来啊{:4_173:}

红影 发表于 2023-8-28 13:08

山里人 发表于 2023-8-28 11:05
香染唱得真不错，是位大美女吧

是的，而且文章也写得好呢{:4_173:}

红影 发表于 2023-8-28 13:09

亦是金 发表于 2023-8-28 11:13
香染唱得真好！欣赏了！

问好亦是金老师{:4_187:}
页: [1] 2 3 4
查看完整版本: 《我把岁月酿成酒》翻唱：香染