端午节安康
本帖最后由 执著 于 2024-6-10 22:09 编辑 <br /><br /><style>#papa {margin: 100px -280px;
width: 1164px;
height: 640px;
background:url(https://pic.imgdb.cn/item/6665c8c55e6d1bfa0513da77.png)no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
.vid { position: absolute; object-fit: cover; }
.vid:nth-of-type(1) {top: -5px; width: 100%; height: calc(100% ); mix-blend-mode: multiply; }
.vid:nth-of-type(2) {left: 1050px;top: 510px; width: 100px; height: 100px; border-radius: 50%; mix-blend-mode: screen; }
</style>
<div id="papa">
<audio id="aud" src="https://od.lk/s/NzBfMTcwMzUxMTdf/%E4%BA%91%E8%8F%B2%E8%8F%B2-%E6%9C%88%E6%BB%A1%E8%A5%BF%E6%A5%BC.mp3
" autoplay loop></audio>
<video class="vid" src="https://od.lk/s/NzBfMTcwMzUxMTVf/%E7%AB%AF%E5%8D%88%E8%8A%82960%2B540%20%282%29.mp4" loop muted></video>
<video class="vid" src="https://od.lk/s/NzBfMTcwMzUxMzFf/%E6%B0%91%E6%97%8F%E9%A3%8E%E5%85%AB%E8%8F%B1%E5%BD%A9%E8%89%B2%E8%8A%B1.mp4" loop muted></video>
</div>
<script type="text/javascript">
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '.cube',
lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
});
}
(function() {
let vids = document.querySelectorAll('.vid');
let mState = () => vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
aud.onplaying = aud.onpause = () => mState();
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
https://p4.itc.cn/q_70/images03/20210612/796524c78b654712af09305cdfbf0091.gif 问好执著，视频位置还得再调整一下 https://p4.itc.cn/q_70/images03/20210612/796524c78b654712af09305cdfbf0091.gif 漂亮的节日贺帖。欣赏执著好制作，同祝大家端午安康{:4_187:} 起个网名好难 发表于 2024-6-10 07:55
谢谢老师临帖鼓励！我本来想用您“ 憨憨”贴中霓虹歌词显示效果，搞了半天也没有弄好！ 小辣椒 发表于 2024-6-10 12:07
问好执著，视频位置还得再调整一下
老师节日快乐！您是不是已经帮我调好了？ 执著 发表于 2024-6-10 22:16
谢谢老师临帖鼓励！我本来想用您“ 憨憨”贴中霓虹歌词显示效果，搞了半天也没有弄好！
歌词显示用个多彩图片就能得到那效果。 红影 发表于 2024-6-10 18:41
漂亮的节日贺帖。欣赏执著好制作，同祝大家端午安康
谢谢影子鼓励！节日问候{:4_204:} 起个网名好难 发表于 2024-6-10 22:19
歌词显示用个多彩图片就能得到那效果。
我还不会弄，老师闲时如能帮我将此贴改一下，让我学习一下{:4_172:} 执著 发表于 2024-6-10 22:23
我还不会弄，老师闲时如能帮我将此贴改一下，让我学习一下
因为用了现成得js文件（https://638183.freep.cn/638183/web/api/lrc.js）无法修改它，要想得到那样得效果只好加个不太美观得补丁。
<script type="text/javascript">
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '.cube',
lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
});
}
</script>
<style>
#lrc::before{color:transparent;background:url('https://img95.699pic.com/xsj/1r/uu/zw.jpg') center/cover;-webkit-background-clip:text;background-clip:text;}
</style>
<script>
(function() {
let vids = document.querySelectorAll('.vid');
let mState = () => vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
aud.onplaying = aud.onpause = () => mState();
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
执著 发表于 2024-6-10 22:23
我还不会弄，老师闲时如能帮我将此贴改一下，让我学习一下
44-48行是添加的。 执著 发表于 2024-6-10 22:19
谢谢影子鼓励！节日问候
不客气，端午安康{:4_187:} 执著 发表于 2024-6-10 22:18
老师节日快乐！您是不是已经帮我调好了？
我帮你调整了帖子居中，视频的大小和透明度我没有修改的，你可以慢慢自己调整一下，以后就可以玩的 小辣椒 发表于 2024-6-11 15:18
我帮你调整了帖子居中，视频的大小和透明度我没有修改的，你可以慢慢自己调整一下，以后就可以玩的
谢谢辣椒老师，还是我美术鉴赏力太差了，看不出细节问题，希望老师多多指教哈{:4_204:} 本帖最后由 执著 于 2024-6-11 22:25 编辑
起个网名好难 发表于 2024-6-10 22:36
44-48行是添加的。
非常感谢老师的修改“补丁”，补丁不美观，显示很美观{:4_185:}；但是，我用js源代码进行无补丁修改（将下列红色部分改成老师的：#lrc::before{color:transparent;background:url('https://img95.699pic.com/xsj/1r/uu/zw.jpg') center/cover;-webkit-background-clip:text;background-clip:text;}），却没有变化（不过，在下列红色代码后加上老师的上面代码可以显示）：
(function(lrcShow) {
let d_config = {
papa: '#papa',
btn: '#papa',
lrcAr: [],
lrc_css: 'left: 10px; top: 10px;',
html_code: `<style>
#lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65)); position: absolute; font: bold 2.4em sans-serif; color: hsl(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); z-index: 900; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
@keyframes cover1 { from { width: 0%; }to { width: 100%; } }
@keyframes cover2 { from { width: 0%; }to { width: 100%; } }
</style>
<div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>`,
};
let execLrc = (u_config) => {
let data = Object.assign({}, d_config, u_config);
let pabox = document.querySelector(data.papa);
pabox.innerHTML += data.html_code;
let btns = document.querySelectorAll(data.btn);
lrc.style.cssText += data.lrc_css;
let vids = document.querySelectorAll('video');
let elms = ;
let mKey = 0, mFlag = true;
let stateSetting = (elms,state,val) => elms.forEach(elm => elm.style.setProperty(state,val));
let vidplay = (vids,idx) => {
if(vids.length < 1) return;
[...vids].forEach(vid => {
idx ? vid.play() : vid.pause();
});
};
let showLrc = (time) => { let name = mFlag ? 'cover1' : 'cover2'; lrc.innerHTML = data.lrcAr; lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n'); lrc.style.setProperty('--motion', name); lrc.style.setProperty('--tt', time + 's'); lrc.style.setProperty('--state', 'running'); mKey += 1; mFlag = !mFlag; };
let calcKey = () => { for (j = 0; j < data.lrcAr.length; j++) { if (aud.currentTime <= data.lrcAr) { mKey = j - 1; break; } } if (mKey < 0) mKey = 0; if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1; let time = data.lrcAr - (aud.currentTime - data.lrcAr); showLrc(time); };
let mState = () => {
aud.paused ? (stateSetting(elms,'--state','paused'),vidplay(vids,0)) : (stateSetting(elms,'--state','running'),vidplay(vids,1));
};
[...btns].forEach(btn => {
btn.onclick = () => aud.paused ? aud.play() : aud.pause();
});
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
for (let j = 0; j < data.lrcAr.length; j++) {
if (aud.currentTime >= data.lrcAr) {
if (mKey === j) showLrc(data.lrcAr);
else continue;
}
}
});
};
lrcShow.LRC = execLrc;
})(this);
执著 发表于 2024-6-11 22:18
非常感谢老师的修改“补丁”，补丁不美观，显示很美观；但是，我用js源代码进行无补丁修改（将 ...
不太明白你的意思，如果直接修改js的源代码只需把 background: var(--bg); 改成 background:url('https://img95.699pic.com/xsj/1r/uu/zw.jpg') center/cover;就行了。
改了js源代码帖子代码就不需要改了。
起个网名好难 发表于 2024-6-11 22:59
不太明白你的意思，如果直接修改js的源代码只需把background: var(--bg); 改成 background:url('https: ...
谢谢老师不厌其烦地指教！可以依老师的样画葫芦了。
页:
[1]