时光的记忆 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

论坛 › 欢乐水吧 › 时光的记忆

普陀申木 发表于 2025-1-23 15:27

时光的记忆

<div class="cont-area">
<div style="width: 100%;height: 800px;position: absolute;MARGIN-LEFT:-400px;transform: scale(1);"><iframe frameborder="0" height="800" marginheight="0" marginwidth="0" scrolling="no"
src="https://file.uhsea.com/2501/2a67264606baf0f32000874aaf3da79860.html" width="1300"></iframe></div>

<div style="width: 100%;height: 750px;"> </div>

<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

<p><a href="https://file.uhsea.com/2501/2a67264606baf0f32000874aaf3da79860.html
"><span style="font-size:32px;">点此全屏观赏</span></a></p>
</div>

普陀申木 发表于 2025-1-23 15:27

本文用了彩云归老师三种插入样式图片背景图片左右移动；上下移动；图片放大和花潮二种歌词插件其中一个为静音，也就是将二个代码文章合并为一篇共用一个MP3,
我也是为在学习的过程中增加乐趣而作，谓自得其乐。

红影发表于 2025-1-23 18:19

不知道为什么，这看不到呢{:4_203:}

普陀申木 发表于 2025-1-23 19:40

<style>
   #papa { margin: 0 0 0 calc(50% - 593px); width: 1164px; height: 640px; background: url('https://pic.imgdb.cn/item/652fa9a0c458853aef19f156.png') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; border-radius:0px; }
#picblock {
width:11950px; /* 全部图片宽度（图片的宽度*图片张数）*/
height:640px;    /* 图片高度 */
animation: picMoveLeft 100s linear infinite;/* 左右移动一次时间（秒） */
position:absolute;
top: 0; }
#picblock > img {float:left;width:1195px;; height:640px;}/* 每张图片宽度、高度 */

@keyframes picMoveLeft {
0% {left:0px;} /* 起始位置*/
50%{left:-10990px;} /* 结束位置 - 全部图片宽度-960 */
100% {left:0px;}
}

#vid { position: absolute; width: 110%; height: 120%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
.vidC { position: absolute; width: 600px; height: 400px;MARGIN-LEFT:-500px;margin-top: 350px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ; }
.tspan { position: absolute; left:-480px;top:-250px;font: bold 40px sans-serif; color: Maroon; text-shadow: 1px 1px 2px #fff; offset-path: path('M650, 400 Q800, 200 950,400'); }
   @keyframes move { from {left: 35%; } to { left: 40%; } }
</style>

<style>
#tp{top:20%; left:25%;position: absolute;width: 50px;height:50px;border-radius:50%;border:2px solid#00ff00;background:url('https://pic1.imgdb.cn/item/67765963d0e0a243d4edd133.jpg') center/cover no-repeat,url('')-80px 10px/170% 100%;animation: spin 25s infinite linear ;cursor:pointer;}
@keyframes spin {100% { transform: rotate(360deg); }
}
</style>
<style type="text/css">.photo {
width: 20%; height: 40%;
position:absolute; top:200px; left:700px; z-index: 300;
filter:contrast(100%)brightness(100%);
-webkit-mask-image:radial-gradient(black 30%,transparent 70%);
animation:round 48s infinite;
opacity:0;}
@keyframes round {
1%{ opacity: 0; transform:translate(0%,-100%)scale(1);}
5%{ opacity: 1; transform:translate(0%,-100%)scale(1);}
14% { opacity: 1; transform:translate(0%, 0%)scale(1);}
16% { opacity: 1; transform:translate(0%, 0%)scale(1);}
24% { opacity: 0; transform:translate(0%, 100%)scale(1);}
}
img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
img:nth-child(1) {animation-delay: 0s;}
</style>
<style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--w:768px;--h:1024px;}
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2em 微软雅黑;
pointer-events:none;
filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white);
z-index:99;left:20%;bottom:1%;color:hsla(240,60%, 90%, 0.7);
}
.lrcShow::before {
color: transparent;
}
#oBlk {
width:var(--w);height:var(--h); position: relative; margin:20px 0 32px -60px;
background: hsla(203, 25%, 86%, 0.7);
padding:16px;
overflow:hidden;
border-radius:36px;
box-shadow:3px 3px 6px darkgray;
}
#showSVG {position:absolute; left:0px;top:0px;width:100%;height:100%;}
#processMeter {position: absolute; right:3%; bottom:5px; width: 120px; height:60px; cursor: pointer; z-index:99;}
#mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes rot{to{transform: rotate(1turn)}}
   #feather {position: absolute; left: 0; top: 0; width: 50px;offset-distance: 0;offset-path: path("M500 -60 Q 300 80, 600 200 T 1000 840");animation: move 8s linear infinite;z-index:100;}
   @keyframes move { to { offset-distance: 100%;} }
</style>
<div id="papa">
<div id="picblock" >
<img src="https://files.superbed.cn/images/659a148c871b83018a0c11fe.gif"/>
<img src="https://files.superbed.cn/images/659a148c871b83018a0c1231.gif"/>
<img src="https://files.superbed.cn/images/659a148c871b83018a0c1260.gif"/>
<img src="https://files.superbed.cn/images/659a14e4871b83018a0d25d6.gif"/>
<img src="https://files.superbed.cn/images/659a14e4871b83018a0d2614.gif"/>
<img src="https://files.superbed.cn/images/659a14e4871b83018a0d2656.gif"/>
<img src="https://files.superbed.cn/images/659a14e5871b83018a0d26cc.gif"/>
<img src="https://files.superbed.cn/images/659a14e5871b83018a0d26fe.gif"/>
<img src="https://files.superbed.cn/images/659a14e5871b83018a0d2777.gif"/>
<img src="https://files.superbed.cn/images/659a1541871b83018a0e4854.gif" />
<img src="https://files.superbed.cn/images/659a1541871b83018a0e48ae.gif" />
<img src="https://files.superbed.cn/images/6557eed2c458853aef703738.gif"/>
<img src="https://files.superbed.cn/images/659a1541871b83018a0e4987.gif"/>
<img src="https://files.superbed.cn/images/659a1541871b83018a0e4b84.gif"/>
<img src="https://files.superbed.cn/images/659a1598871b83018a0f5c3a.gif"/>
<img src="https://files.superbed.cn/images/659a1598871b83018a0f5c7b.gif"/>
<img src="https://files.superbed.cn/images/659a1598871b83018a0f5cd1.gif"/>
<img src="https://files.superbed.cn/images/659a1598871b83018a0f5d8e.gif" />
<img src="https://files.superbed.cn/images/659a1598871b83018a0f5dcf.gif" />
<img src="https://files.superbed.cn/images/659a163f871b83018a1191df.gif" />
<img src="https://files.superbed.cn/images/659a163f871b83018a119216.gif"/>
<img src="https://files.superbed.cn/images/659a163f871b83018a119254.gif" />
<img src="https://files.superbed.cn/images/659a163f871b83018a11928c.gif"/>
<img src="https://files.superbed.cn/images/659a163f871b83018a1192e7.gif"/>
<img src="https://files.superbed.cn/images/659a163f871b83018a119317.gif" />
<img src="https://files.superbed.cn/images/659a1728871b83018a149e91.gif" />
<img src="https://files.superbed.cn/images/659a1727871b83018a149aa9.gif"/>
<img src="https://files.superbed.cn/images/659a1727871b83018a149b06.gif" />
<img src="https://files.superbed.cn/images/659a1727871b83018a149b5d.gif"/>
<img src="https://files.superbed.cn/images/659a1727871b83018a149b88.gif" />
<img src="https://files.superbed.cn/images/659a1727871b83018a149b9d.gif" />
<img src="https://files.superbed.cn/images/659a1977871b83018a1c654b.gif" />
<img src="https://files.superbed.cn/images/659a1992871b83018a1cc34a.gif"/>
<img src="https://files.superbed.cn/images/659a19d1871b83018a1d8dca.gif" />
<img src="https://files.superbed.cn/images/659a19d1871b83018a1d8e14.gif"/>
<img src="https://files.superbed.cn/images/659a19d1871b83018a1d8e46. gif"/>
<img src="https://files.superbed.cn/images/659a19d1871b83018a1d900e.gif"/>
<img src="https://files.superbed.cn/images/659acfa5871b83018a350465.webp"/>
<img src="https://files.superbed.cn/images/659acfa5871b83018a35062a.gif"/>
<img src="https://files.superbed.cn/images/659acf9d871b83018a34d919.gif"/>
<img src="https://files.superbed.cn/images/659acfa3871b83018a34f88a.gif"/>
<img src="https://files.superbed.cn/images/659acfa4871b83018a34fdd1.gif"/>
<img src="https://files.superbed.cn/images/659acfa5871b83018a350248.gif"/>
<img src="https://files.superbed.cn/images/659ad053871b83018a384e80.gif"/>

</div>
<div id="tp"title="播放/暂停"></div>
<video id="vid" src="http://img3.oldkids.cn/upload/2023/10/18/blog_260780434_20231018145406950.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<video class="vidC" src="https://media-volc.jianpian.info/2769333/article/20240525/c6d0101016e9471f9a8ffddbe690f00e.mp4"style="-webkit-mask-image: radial-gradient(black 2% ,transparent 70%)" autoplay="autoplay" loop="loop" muted="muted"></video>
div id="oBlk">
<div id="showSVG"></div>
<div id="processMeter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
<defs>
            <clipPath id="clip">
            <circle cx="100" cy="50" r="35" />
            </clilpPath>
         </defs>
<image xlink:href="http://p2.music.126.net/tMDKEYGguhwtXfqUlQYDaQ==/109951169681834558.jpg" width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
<g fill='none' stroke-width='8'>
<path d="M 40 97 C -120 -25,330 -25, 150 97 Z" stroke="lightgray" id="bgc"></path>
<path d="M 40 97 C -120 -25,330 -25, 150 97 Z" stroke="pink" id="fgc"></path>
</g>
   <g text-anchor="middle" dominant-baseline="middle" fill="red" style="font-size:16px;">
<text x="82%" y="55%" id="durTime">00:00</text>
<text x="18%" y="55%" id="curTime">00:00</text>
   </g>
</svg>
</div>
<divclass="lrcShow" data-lrc='轻舟'></div>
</div></div>
<audio id="aud" src="https://fs-im-kefu.7moor-fs1.com/ly/4d2c3f00-7d4c-11e5-af15-41bf63ae4ea0/1737605143859/时光的记忆.mp3" autoplay loop muted "></audio>
<div class="play" id="photo"><img alt="" class="photo" src="https://pic.imgdb.cn/item/6647f72bd9c307b7e9071aeb.png" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/6647f72bd9c307b7e9071ae0.png" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/6647f72bd9c307b7e9071ada.png" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/6647f72bd9c307b7e9071ace.png" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/6647f72bd9c307b7e9071ac3.png" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/6647f72bd9c307b7e9071aba.png" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/6647f72bd9c307b7e9071aaf.png" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/6647f72ad9c307b7e9071a70.png" /></div>

</div>
<script>

(function() {
   let script = document.createElement('script');
   script.src = 'https://638183.freep.cn/638183/web/api/pinpuz_lrc.js';
   script.charset = 'utf-8';
   document.head.appendChild(script);
   let geci = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];
   var tAr = '时光的记忆'.split('');
tAr.forEach((t,k) => {
var tp = document.createElement('span');
tp.className = 'tspan';
tp.textContent = t;
tp.style.cssText += `offset-distance: ${Math.floor(100 / tAr.length) * (k + 0.5)}%;`;
papa.appendChild(tp);
});
script.onload = () => {
            HCPlayer({
                     papa: '#papa',
                     lrcAr: geci,
                     lrc_css: `
                           left: 30px;
                           top: 20px;
                           animation: move 10s infinite alternate linear var(--state);
color: color: Gold; --bg: linear-gradient(28deg, #FB0000 31%,#F8F9FA 53%,#F5D603 70%);
font-size: 2.2em; /* 歌词同步颜色 */
                     `,
                     player_css: `
                           bottom: 38%;
                           right: 6%;
                           --ww: 480px;
                           --color1:#FFF8DC;
                           --color2: #DC143C;
                           --track: #aaa;
                     `,
                     pinpu: { size: 5, gap: 2, radColor: 0},
                     fs_css: 'background: #8A2BE2; color: LimeGreen; top: 61%; left: 16%;',

            });
   };
})();

</script>
<script type="text/javascript">
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);

sf0.onload = () => {
let pics = [
"https://pic1.imgdb.cn/item/6791a6ccd0e0a243d4f6f633.jpg" ,"https://pic1.imgdb.cn/item/6791a6ccd0e0a243d4f6f634.jpg" ,"https://pic1.imgdb.cn/item/6791a6cdd0e0a243d4f6f635.jpg" ,"https://pic1.imgdb.cn/item/6791a6ced0e0a243d4f6f639.jpg" ,"https://pic1.imgdb.cn/item/6791a6ced0e0a243d4f6f63a.jpg" ,"https://pic1.imgdb.cn/item/6791a6ced0e0a243d4f6f63b.jpg" ,"https://pic1.imgdb.cn/item/6791a6cfd0e0a243d4f6f63c.jpg" ,
];
function genTagObj(parentNode,jsonData){let sObj=document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);for(let key in jsonData){if(key==='tag'){continue}else if(jsonData.hasOwnProperty(key)){sObj.setAttribute(key,jsonData)}};if(parentNode)parentNode.appendChild(sObj);return sObj};
let mysvg = genTagObj(null ,{'tag':'svg', 'id':'sObj', 'xmlns:xlink':"http://www.w3.org/1999/xlink" ,'xmlns':"http://www.w3.org/2000/svg", 'viewBox':`0 0 768 1024`});
pics.forEach((pic, idx) => {
let beginStr = idx == 0 ? `0;ep${pics.length-1}.end-5` : `ep${idx-1}.end-5`;
let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':pic, 'width':0, 'height':0, 'x':384, 'y':512, 'opacity':0, 'preserveAspectRatio':'none'});
let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':3, 'begin':beginStr, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'x', 'from':384, 'to':0, 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'y', 'from':512, 'to':0, 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'width', 'from':0, 'to':768, 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'from':0, 'to':1024, 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
//aniObj = genTagObj(imgObj,{'tag':'animateTransform', 'attributeName':'transform', 'type':'rotate','from':'0 384 512', 'to':'360 384 512', 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});

//aniObj = genTagObj(imgObj,{'tag':'animateTransform', 'attributeName':'transform', 'type':'rotate','from':'0 384 512', 'to':'-360 384 512', 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'x', 'to':384, 'from':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'y', 'to':512, 'from':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'width', 'to':0, 'from':768, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'to':0, 'from':1024, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate','id':`ep${idx}`, 'attributeName':'opacity', 'from':1, 'to':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
});
showSVG.innerHTML = mysvg.outerHTML;

const lrc =`
时光的记忆
我坐在时光的记忆里，
为你写诗。
深情的笔尖
在激情的河流中畅游。
抒情、浪漫、婉约。
词汇里浸染着你的味道，
诗行中流淌着芳香的往事。
想你了，
回不去的过往。
想你的时候，
心头溢满了柔柔的惬意。
想你的时候，
岁月的门楣上
散落着淡淡的遗憾。
这滋味是幸福的，
笑容里滴落着无奈的泪。
是甜蜜的回忆中。
镶嵌着苦涩的痛。

`;
var opts = {
lrcTxt:lrc,
// audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://fs-im-kefu.7moor-fs1.com/ly/4d2c3f00-7d4c-11e5-af15-41bf63ae4ea0/1737605143859/时光的记忆.mp3'
//audioURL:'https://cccimg.com/view.php/aa761e148027a311dfb213e0976bb941.aac'
};
let lrcPlayer = new lrcPlayerY(opts);
// 格式化时间数据
let formatTime = (time) => {
let min = ('' + parseInt(time / 60)).padStart(2,'0');
let sec = ('' + parseInt(time % 60)).padStart(2,'0');
return (`${min}:${sec}`);
};
// 计算/设置控制路径有关的数据
let circlePoints = [];
let bgcLen = bgc.getTotalLength();
fgc.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;

for(let i = 0; i < bgcLen; i++) {
circlePoints.push(bgc.getPointAtLength(i));
}
// 在 timeupdate 事件处理中添加与控制路径有关的处理
lrcPlayer.mObj.addEventListener('timeupdate', function() {
let processValue = lrcPlayer.mObj.currentTime / lrcPlayer.mObj.duration;
fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
durTime.textContent = formatTime(lrcPlayer.mObj.duration);
curTime.textContent = formatTime(lrcPlayer.mObj.currentTime);
});
// 动态元素监测
let runState = () => {
lrcPlayer.mObj.paused
? (mCtrl.style.setProperty('--rState','paused'),sObj.pauseAnimations())
: (mCtrl.style.setProperty('--rState','running'),sObj.unpauseAnimations());
}
// SVG viewBox 与实际尺寸的比值
let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
//console.log(factorX, factorY);
// 歌曲进度条鼠标移动处理
let seeking = false;
let moveEventProc = (event) => {
if(!seeking) return;
let thePoint = 0, minV = 100;
circlePoints.forEach((point, idx ) => {
let mx = (point.x - event.offsetX * factorX), my = (point.y - event.offsetY * factorY);
let mv = mx*mx + my*my;
if(mv < minV) {
minV = mv; thePoint = idx;
}
})
let chkVal = thePoint / bgcLen;
let chkTime = lrcPlayer.mObj.duration * chkVal;
fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);

let fIdx = false;
lrcPlayer.lrcVec.forEach((lrc,idx) => {
if(!fIdx && lrc.seconds >= chkTime ) {
fIdx = !fIdx; lrcPlayer.idx = idx;
lrcPlayer.mObj.currentTime = chkTime;
return fIdx;
}
});
};

fgc.addEventListener("mousemove", (event) => moveEventProc(event));
bgc.addEventListener("mousemove", (event) => moveEventProc(event));
fgc.onclick = bgc.onclick = (event) => seeking = !seeking;

// 歌曲、歌词及动态元素启/停控制
mCtrl.onclick = () => {
lrcPlayer.mObj.paused ? (lrcPlayer.mObj.play()) : (lrcPlayer.mObj.pause());
}
lrcPlayer.mObj.addEventListener('play', () => runState());
lrcPlayer.mObj.addEventListener('pause', () => runState());
lrcPlayer.mObj.play().catch(_ = () => runState());

}
</script>
</div>

冬天的雨 发表于 2025-1-23 23:22

上面连接失效，下面的没有听到音乐{:4_203:}

冬天的雨 发表于 2025-1-23 23:24

舍屋最近连接不能用了，看了提示证书失效估计没有去备案

冬天的雨 发表于 2025-1-23 23:25

免费上传网盘注册一个
https://cccimg.com/

好开心 发表于 2025-1-28 14:35

美丽的花儿

页: [1]

查看完整版本: 时光的记忆