樵歌 发表于 2023-7-22 07:23
另外请教师妹，你那图图能用到边框加文字上吗？就像千羽音画赏析那种？
没看明白师兄说的是什么，动图可以直接放进去。用代码做出来的动态不能像图片一样随意放。可以用一种截图软件把它变成动图。
焱鑫磊 发表于 2023-7-22 09:28
好制作！欣赏！
谢谢焱鑫磊美女鼓励{:4_187:}
红影 发表于 2023-7-22 10:45
没看明白师兄说的是什么，动图可以直接放进去。用代码做出来的动态不能像图片一样随意放。可以用一种截图 ...
我的意思是说，在文字编辑框中，上图，下面写字。师妹说动图不行，要截图，那浏览器右上那截图工具行不行，截图了后再复制替换掉其字图片地址？
樵歌 发表于 2023-7-22 16:43
我的意思是说，在文字编辑框中，上图，下面写字。师妹说动图不行，要截图，那浏览器右上那截图工具行不行 ...
动图是可以的啊。没明白师兄想问的是什么{:4_203:}
红影 发表于 2023-7-22 21:47
动图是可以的啊。没明白师兄想问的是什么
我是说，想把你的图图和音乐放最上面，下面再凑些字，但都 在一个框里，比如那长相思一样，上面是图，下面是字{:4_189:}
樵歌 发表于 2023-7-23 07:09
我是说，想把你的图图和音乐放最上面，下面再凑些字，但都 在一个框里，比如那长相思一样，上面是图，下 ...
可以啊，这个也是有背景图的，放进去就是了。{:4_204:}
红影 发表于 2023-7-18 22:43
还想做那个圆圈儿的频谱，现在不知道拿什么东西去做了。
{:4_199:}看到你做出来了，效果绝了，十分惊艳
红影 发表于 2023-7-23 13:29
可以啊，这个也是有背景图的，放进去就是了。
还是没敢弄，我看到两部分代码两堆，也不知道加哪里，真怕了
花飞飞 发表于 2023-7-24 09:44
看到你做出来了，效果绝了，十分惊艳
谢谢飞飞鼓励，抱抱{:4_179:}
樵歌 发表于 2023-7-24 11:26
还是没敢弄，我看到两部分代码两堆，也不知道加哪里，真怕了
师兄是说让这个帖子直接套用到边框帖子里么？我也没试过呢，不知道怎么弄{:4_173:}
红影 发表于 2023-7-24 16:16
师兄是说让这个帖子直接套用到边框帖子里么？我也没试过呢，不知道怎么弄
是的。
樵歌 发表于 2023-7-24 18:24
是的。
其实也可以。把这个帖子的外边套上外边框就行啦。
红影 发表于 2023-7-24 20:10
其实也可以。把这个帖子的外边套上外边框就行啦。
弄不来{:4_201:}
樵歌 发表于 2023-7-25 07:05
弄不来
没弄清楚师兄的要求，我也弄不来。比如歌词同步是否还留着，用了帖子里的音乐边框里的音乐怎么处理等。
红影 发表于 2023-7-25 20:41
没弄清楚师兄的要求，我也弄不来。比如歌词同步是否还留着，用了帖子里的音乐边框里的音乐怎么处理等。
把边框音乐那一段代码删除不知道行不行，这个只有请教黑师了
樵歌 发表于 2023-7-26 07:48
把边框音乐那一段代码删除不知道行不行，这个只有请教黑师了
原来师兄是不使用边框代码里的音乐啊，那就很简单啊，把这个帖子里的代码直接可以塞在边框里。
之前我一直觉得代码里的音乐没法处理呢。我去合并了一下，把这个帖子里的都缩小一半，就塞进去了{:4_173:}
<style>
#papa {
width: 700px;
min-height: 900px;
padding: 40px;
box-sizing: border-box;
border-radius: 12px;
box-shadow: 0 0 8px #000;
position: relative;
margin: 20px auto;
top: 50px;
display: grid; user-select: none;
place-items: center;
user-select: none;
}
#tit {
position: absolute;
left: 115px;
top: 460px;
font: bold 22px/26px 'FangSong',serif;
color: SlateBlue;
}
#papa::before, #papa::after {
position: absolute;
content: '';
}
#papa::before {
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
border: 2px dashed DarkBlue;
border-radius: inherit;
}
#papa::after {
content: '【长相思】TO芊芊 ';
padding: 10px 40px 10px 10px;
left: -10px;
top: 20px;
border-radius: 10px 0 0 10px;
background: MediumBlue;
opacity: .85;
font: bold 16px/24px sans-serif;
color: white;
clip-path: polygon(0 0,100% 0,90% 50%, 100% 100%, 0 100%);
}
#mydiv { left: 104px; top: 90px; width: 512px; height: 320px; background: url('https://pic.imgdb.cn/item/64b537751ddac507cc3b33e2.jpg') no-repeat center/cover; box-shadow: 0 0 8px 0 #000; opacity: .95; overflow: hidden; z-index: 1; position: absolute; --state: paused; }
#lrc { position: absolute; top: 10px; left: 20px; font: bold 1.8em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(240,100%,50%,.95)); --motion: cover2; --tt: 5s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(60,100%,50%,.45),hsla(0,100%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
pinpu-wrapper { position: absolute; bottom: 5%; left: 50%; transform: translate(-50%); cursor: pointer; }
pin-pu { position: absolute; bottom: 0; animation: pinpuMotion var(--du) var(--delay) infinite alternate linear var(--state);--psw: 6px; }
pin-pu::before { content: ''; position: absolute; left: calc(50% - var(--psw) / 2); top: -10px; width: var(--psw); height: var(--psw); border-radius: 50%; background: snow; }
.vid { position: absolute;left: 0px;top:-30px; width: 512px; height: 350px; object-fit: cover; opacity: 0.7; mix-blend-mode: lighten; }
.vid1 { position: absolute;left: 0px;bottom:-35%; width: 512px; height: 320px; object-fit: cover; opacity: 0.5; mix-blend-mode: lighten; clip-path: inset(57% 0 35% 0); }
@keyframes pinpuMotion { from { height: 0px; } to { height: var(--height); } }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
.mpic { position: absolute; right: -10px; bottom: -10px; width: 300px; height: 183px; }
.mpic1 { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; opacity: .35;
background: url('https://pic.imgdb.cn/item/647c033ef024cca17313a454.gif'); }
</style>
<div id="papa">
<div class="mpic1"></div>
<div id="mydiv">
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<video class="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c06cdf1cd6_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<pinpu-wrapper></pinpu-wrapper>
<div id="lrc"data-lrc="花潮lrc在线">花潮lrc在线</div>
</div>
<img src="https://pic.imgdb.cn/item/6482db5b1ddac507ccaa9ddd.gif" alt="" class="mpic" />
<div id="tit"> 长相思二首 TO芊芊<br>
2023-07-15•樵歌<br><br>
别一年，又一年，江水悠悠去不还，遥山独立寒。<br>
月如弦，影如弦，捻抹相思珠泪弹。倚琴人未眠。<br><br>
春复秋，再复秋，春去秋来日夜流，光阴也染愁。<br>
思悠悠，梦悠悠，梦到卿时方始休，踏歌清且柔。<br><br>
</div></div><br><br><br><br><br><br>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/04/03/7053a689479e351982d7f4dc8c96a0a8.mp3" autoplay loop></audio>
<script>
~function() {
let pinpuNum = 50, pinpuWidth = 4, pinpuHeight = 100, mKey = 0, mFlag = true, slip = 0.2;
let ppwrap = document.querySelector('pinpu-wrapper');
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'), lrc.style.setProperty('--state','paused')) : (mydiv.style.setProperty('--state','running'), lrc.style.setProperty('--state','running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;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 < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
let msort = (ar) => {let newAr = [];ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));return newAr;}
~function() {let ar = Array.from(Array(pinpuNum), (v,k) => pinpuNum - k -1);Array.from({length: pinpuNum}).forEach((item,key) => {item = document.createElement('pin-pu');item.style.cssText += `width: ${pinpuWidth}px;left: ${(pinpuWidth + 2) * key}px;background: #${Math.random().toString(16).substr(-6)};--height: ${15 + (pinpuHeight - 15) / pinpuNum * msort(ar)}px;--du: ${Math.random() * 1.2 + 1.2}s;--delay: -${Math.random()}s;`;ppwrap.appendChild(item);});ppwrap.style.height = `${pinpuHeight}px`;ppwrap.style.width = `${(pinpuWidth + 2) * pinpuNum}px`;}();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('seeked', calcKey, false);
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr + slip) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
}();
</script>
樵歌 发表于 2023-7-26 07:48
把边框音乐那一段代码删除不知道行不行，这个只有请教黑师了
师兄看57楼，是这样意思么？只要肯舍弃一个音乐，合并特别简单啊{:4_173:}把原来放图片的地方改为放代码，然后把这个帖子的css html js 分别放进来就好了。
红影 发表于 2023-7-26 11:44
原来师兄是不使用边框代码里的音乐啊，那就很简单啊，把这个帖子里的代码直接可以塞在边框里。
之前我一 ...
才看到，谢谢师妹了！这几天一直胸闷气短，不大敢上网。连续看了两医生，改加了一些药，从昨天感觉好点了
红影 发表于 2023-7-26 11:44
#papa {
width: 700px;
min-height: 900px;
已经复制收藏了。{:4_187:}