马黑黑 发表于 2023-12-17 21:15

轻涟 La vaguelette

<style> #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/qklm.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; display: grid; place-items: center; z-index: 1; }
.mypic { position: absolute; width: 150px; cursor: pointer; animation: rot 6s infinite linear var(--state); }
.mypic:nth-of-type(1) { left: 20px; }
.mypic:nth-of-type(2) { top: 20px; width: 200px; }
.mypic:nth-of-type(3) { right: 20px; }
#vid { position: absolute; width: 1024px; height: 740px; top:-100px; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/60/33/638ee6ad2b3ff.mp4" autoplay="" loop="" muted=""></video>
        <img class="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.svg" alt="" />
        <img class="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.svg" alt="" />
        <img class="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.svg" alt="" />
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2100334024" autoplay loop></audio>
</div>

<script>

(function() {

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: '#papa',
                lrcAr: geci,
                btn: '.mypic',
                lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
        });
};

let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

})();

</script>

马黑黑 发表于 2023-12-17 21:16

帖子代码

<style> #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/qklm.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; display: grid; place-items: center; z-index: 1; }
.mypic { position: absolute; width: 150px; cursor: pointer; animation: rot 6s infinite linear var(--state); }
.mypic:nth-of-type(1) { left: 20px; }
.mypic:nth-of-type(2) { top: 20px; width: 200px; }
.mypic:nth-of-type(3) { right: 20px; }
#vid { position: absolute; width: 1024px; height: 740px; top:-100px; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/60/33/638ee6ad2b3ff.mp4" autoplay="" loop="" muted=""></video>
        <img class="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.svg" alt="" />
        <img class="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.svg" alt="" />
        <img class="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.svg" alt="" />
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2100334024" autoplay loop></audio>
</div>

<script>

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: '#papa',
                lrcAr: geci,
                btn: '.mypic',
                lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
        });
};

let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

</script>

马黑黑 发表于 2023-12-17 21:19

本帖测试：单独 lrc歌词同步插件

前端仅需要加载插件文档以及做插件配置，其余交给 lrc.js 插件处理，包括视频背景的暂停。插件配置方法稍后发布，请关注俺的小花园。

马黑黑 发表于 2023-12-17 21:22

法文歌词在这里有些问题

焱鑫磊 发表于 2023-12-17 21:45

向老师学习！{:4_187:}

红影 发表于 2023-12-17 22:01

这个还是两行歌词呢。这个好，歌词只交给js就行了，自己不用操心了{:4_187:}

醉美水芙蓉 发表于 2023-12-17 22:03

红影 发表于 2023-12-17 22:05

马黑黑 发表于 2023-12-17 21:22
法文歌词在这里有些问题

从头看了一下，好像只有最后一句出了问题，前面的都好好的{:4_204:}

红影 发表于 2023-12-17 22:06

感谢黑黑又带来新的玩法，可以学着用打包的方式做歌词了{:4_187:}

马黑黑 发表于 2023-12-17 22:25

红影 发表于 2023-12-17 22:05
从头看了一下，好像只有最后一句出了问题，前面的都好好的

嗯，好像是 ça 的头一个字母，在伪元素中的显示有问题

马黑黑 发表于 2023-12-17 22:26

焱鑫磊 发表于 2023-12-17 21:45
向老师学习！

{:4_191:}

马黑黑 发表于 2023-12-17 22:27

红影 发表于 2023-12-17 22:06
感谢黑黑又带来新的玩法，可以学着用打包的方式做歌词了

这个，插件代理的东东比较多，前端省点事，就是不知道有木有问题

马黑黑 发表于 2023-12-17 22:28

红影 发表于 2023-12-17 22:01
这个还是两行歌词呢。这个好，歌词只交给js就行了，自己不用操心了

其实多数插件都支持两行歌词的

马黑黑 发表于 2023-12-17 22:28

醉美水芙蓉 发表于 2023-12-17 22:03
欣赏学习老师新作品！

晚上好

红影 发表于 2023-12-17 22:33

马黑黑 发表于 2023-12-17 22:25
嗯，好像是 ça 的头一个字母，在伪元素中的显示有问题

这样的字母太怪异了{:4_173:}

红影 发表于 2023-12-17 22:34

马黑黑 发表于 2023-12-17 22:27
这个，插件代理的东东比较多，前端省点事，就是不知道有木有问题

等着看后面的配置方法，比如改歌词颜色什么的{:4_187:}

红影 发表于 2023-12-17 22:35

马黑黑 发表于 2023-12-17 22:28
其实多数插件都支持两行歌词的

嗯嗯，这个只对外语的吧，中文的不需要。

马黑黑 发表于 2023-12-17 22:36

红影 发表于 2023-12-17 22:35
嗯嗯，这个只对外语的吧，中文的不需要。

中文是没必要的

马黑黑 发表于 2023-12-17 22:36

红影 发表于 2023-12-17 22:35
嗯嗯，这个只对外语的吧，中文的不需要。

你不分行也是可以的

马黑黑 发表于 2023-12-17 22:36

红影 发表于 2023-12-17 22:34
等着看后面的配置方法，比如改歌词颜色什么的

这个和前面的插件是一样的
页: [1] 2 3 4 5
查看完整版本: 轻涟 La vaguelette