杨帆 发表于 2025-7-4 17:39

怎么可能和谁过都一样 - 学习 忘记了 老师 帖《如果没了你 》

本帖最后由 杨帆 于 2026-1-29 16:55 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>怎么可能和谁过都一样 (童声版)</title>
</head>
<body>
<style>
      #papa { position: relative; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9; overflow: hidden; background: #666 url('https://pic1.imgdb.cn/item/686519a758cb8da5c889ac90.jpg') no-repeat center/cover;z-index: 1;--deg:360deg; }
      #Player { position: absolute; cursor: pointer; transition: 1.2s; animation: rot 5s linear infinite var(--state); z-index: 10; }
      #Player:nth-of-type(1) { --deg: 1turn; }
      #Player:hover { filter: hue-rotate(60deg) drop-shadow(0 0 28px #457148); --state: paused; }
      @keyframes rot { to { transform: rotate(var(--deg)); } }
      .dancer { position: absolute; z-index: 1; }
      .lrcShow { font: bold 42px 'Segoe UI', 'Microsoft YaHei', sans-serif; position: absolute; top: 85%; left: 50%; transform: translateX(-50%); color: transparent; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7)); letter-spacing: 2px; --aniName: bgMove1; --durTime: 300ms; --aniPlayState: running; z-index: 9; width: 80%; text-align: center; }
      .lrcShow::before { position: absolute; content: attr(data-lrc); width: 0; height: 100%; left: 0; top: 0; background-image: linear-gradient(45deg, #ff0077 0%, #ff0099 20%, #ff5500 45%, #00ff99 70%, #7700ff 100%); -webkit-background-clip: text; background-clip: text; overflow: hidden; white-space: nowrap; animation: var(--aniName) var(--durTime) linear forwards; animation-play-state: var(--aniPlayState); }
      @keyframes bgMove1 { from { width: 0; } to { width: 100%; } }
      @keyframes bgMove0 { from { width: 0; } to { width: 100%; } }      
      #vid1, #vid2 { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .5; pointer-events: none; z-index: 1; }
    </style>
<div id="papa">
      <img id="Player" src="https://638183.freep.cn/638183/small/fi2.webp" alt=""
            style="width: 120px; height: 120px;right:2%;top:3%;">
      <img class="dancer" src="https://wjl136.oss-cn-beijing.aliyuncs.com/25/za/wmm.png" alt=""
            style="left: 0px; top: 0px; ">
      <img class="dancer" src="https://wjl136.oss-cn-beijing.aliyuncs.com/25/za/5.gif" alt=""
            style="width: 152px; height: 62px; left: 52%; top: 48%;">
      <img class="dancer" src="https://wjl136.oss-cn-beijing.aliyuncs.com/25/za/x.gif" alt=""
            style="width: 19px; height: 19px; left: 9%; top: 30.2%;">
      <img class="dancer" src="https://wjl136.oss-cn-beijing.aliyuncs.com/21/za/00.gif" alt=""
            style="width: 25px; height: 20px; left: 56%; top: 58%;">
      <img class="dancer" src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" alt=""
            style="mix-blend-mode: screen; width: 225px; height: 220px; left: 5%; top: 38%;">
      <div class="lrcShow" data-lrc="">怎么可能和谁过都一样 (童声版)</div>
      <video id="vid1" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/14/51/00/video636364d43e50d.mp4"
            autoplay loop muted></video>
      <video id="vid2" src="https://bpic.588ku.com/video_listen/588ku_video/25/04/08/17/14/59/video67f4e91361a39.mp4"
            autoplay loop muted></video>
    </div>
    <script>
      if ('getContext' in document.createElement('canvas')) {
            HTMLImageElement.prototype.play = function () {
                if (this.storeCanvas) {
                  this.storeCanvas.parentElement.removeChild(this.storeCanvas);
                  this.storeCanvas = null;
                  this.style.opacity = ''
                }
                if (this.storeUrl) {
                  this.src = this.storeUrl
                }
            };
            HTMLImageElement.prototype.stop = function () {
                var canvas = document.createElement('canvas');
                var width = this.width, height = this.height;
                if (width & height) {
                  if (!this.storeUrl) {
                        this.storeUrl = this.src
                  }
                  canvas.width = width;
                  canvas.height = height;
                  canvas.style.left = this.style.left;
                  canvas.style.top = this.style.top;
                  canvas.getContext('2d').drawImage(this, 0, 0, width, height);
                  try {
                        this.src = canvas.toDataURL("image/gif")
                  } catch (e) {
                        this.removeAttribute('src');
                        canvas.style.position = 'absolute';
                        this.parentElement.insertBefore(canvas, this);
                        this.style.opacity = '0';
                        this.storeCanvas = canvas
                  }
                }
            }
      }

       function lrcPlayerY(opts){
this.init(opts);
}
lrcPlayerY.prototype={
constructor:lrcPlayerY,
init:function(opts){
var lrcTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');
this.lrcShowObj=document.querySelector('.lrcShow');
this.lrcs=this.handleLrc(lrcTxt);
this.lastTime=0;
this.genPlayer(opts.audioURL);
},
handleLrc:function(lrcTxt){
var parts=lrcTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);
var lrcVec=new Array();
for(var l=0;l<parts.length;l++){
var times=parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);
if(times){
var idx=parts.lastIndexOf(']');
if(idx>0)var lyric=parts.substr(idx+1);
for(var m=0;m<times.length;m++){
var time=times.substr(1).replace(']','').split(':');
var seconds=(+time)*60+(+time);
if(lrcVec.length==0&&seconds!=0){
lrcVec.push({f:0,G:''});
}
lrcVec.push({f:+seconds.toFixed(2),G:lyric});
}
}
}
lrcVec.sort(function(a,b){
return(a.f-b.f);
});
for(var k=0;k<lrcVec.length-1;k++){
lrcVec.K=+(lrcVec.f-lrcVec.f).toFixed(2);
}
console.log(lrcVec);
return lrcVec;
},
showLrc:function(dur){
this.lrcShowObj.dataset.lrc=this.lrcs.G;
this.lrcShowObj.style.setProperty('--aniPlayState','paused');
void this.lrcShowObj.offsetHeight;
this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));
this.lrcShowObj.style.setProperty('--durTime',dur+'s');
this.lrcShowObj.style.setProperty('--aniPlayState','running');
this.idx++;
},
genPlayer:function(audioURL){
this.mObj=document.createElement("audio");
this.mObj.muted=false;
this.mObj.autoplay=true;
this.mObj.loop=true;
this.mObj.src=audioURL;
this.lrcShowObj.appendChild(this.mObj);
var that=this;
var chkTime=0;
this.idx=0;
this.mObj.addEventListener('ended',function(){
that.idx=0;
that.mObj.pause();
document.getElementById('vid1').pause();
document.getElementById('vid2').pause();
});
this.mObj.addEventListener('canplay',function(){
that.lrcs.K=+(that.mObj.duration-that.lrcs.f).toFixed(2);
});
this.mObj.addEventListener('pause',function(){
that.lrcShowObj.style.setProperty('--aniPlayState','paused');
document.getElementById('vid1').pause();
document.getElementById('vid2').pause();
});
this.mObj.addEventListener('play',function(){
that.lrcShowObj.style.animation='none';
that.lrcShowObj.offsetHeight;
that.lrcShowObj.style.animation=null;
that.lrcShowObj.style.setProperty('--aniPlayState','running');
document.getElementById('vid1').play();
document.getElementById('vid2').play();
});
this.mObj.addEventListener('error',function(){
console.log("audio error, please check url and network");
that.lrcShowObj.style.display='none';
that.lrcShowObj.removeChild(that.mObj);
});
this.mObj.addEventListener('timeupdate',function(){
if(this.currentTime<that.lastTime-1){
that.idx=0;
}
that.lastTime=this.currentTime;
if(that.idx<that.lrcs.length){
if(this.currentTime>=that.lrcs.f){
that.showLrc(that.lrcs.K);
}
}
});
}
};

      let lrctxt = `
怎么可能和谁过都一样 - 童声版
有人在你哭的时候紧紧抱住你
有人在你哭的时候和你讲道理
日子怎么可能和谁过都一样
选对了人平凡日子里都带着光
有人下雨天撑着伞等风也等你
有人下雨天怪你出门不看天气
日子怎么可能和谁过都一样
选对了人才会来日方长
不想一睁眼就要和谁争个对错
家是温暖的港湾不是来辩论的
也不是非要个完美无缺的神
只是短短一生谁不想被爱更多
有人在你哭的时候紧紧抱住你
有人在你哭的时候和你讲道理
日子怎么可能和谁过都一样
选对了人平凡日子里都带着光
有人下雨天撑着伞等风也等你
有人下雨天怪你出门不看天气
日子怎么可能和谁过都一样
选对了人才会来日方长
有人在你哭的时候紧紧抱住你
有人在你哭的时候和你讲道理
日子怎么可能和谁过都一样
选对了人平凡日子里都带着光
有人在你跌倒时候立刻扶起你
有人在你跌倒时候怪你不小心
有人在你失意时默默陪着你
有人在你失意时权衡着利弊
`;
      let opts = {
            lrcTxt: lrctxt,
            audioURL: "https://cccimg.com/view.php/a79b3117d9a7e1163c33c88a0ec7c2ae.mp3"
      }
      let yP = new lrcPlayerY(opts);

      var dancers = document.querySelectorAll('.dancer');
      var videos = ;
      var mState = () => {
            papa.style.setProperty('--state', yP.mObj.paused ? 'paused' : 'running');
            Player.title = yP.mObj.paused ? '播放' : '暂停';
            dancers.forEach(dancer => yP.mObj.paused ? dancer.stop() : dancer.play());
            videos.forEach(video => yP.mObj.paused ? video.pause() : video.play());
      };
      Player.onclick = () => {
            yP.mObj.paused ? (yP.mObj.play(), vid1.play(), vid2.play()) :
                (yP.mObj.pause(), vid1.pause(), vid2.pause());
      }

      yP.mObj.onplaying = yP.mObj.onpause = () => mState();
    </script>
</body>
</html>

梦油 发表于 2025-7-4 20:41

欣赏佳作，问候杨帆。

杨帆 发表于 2025-7-4 20:44

梦油 发表于 2025-7-4 20:41
欣赏佳作，问候杨帆。

问好梦油超版，谢谢鼓励，祝开心{:4_191:}

梦油 发表于 2025-7-4 21:05

杨帆 发表于 2025-7-4 20:44
问好梦油超版，谢谢鼓励，祝开心

杨帆朋友不客气

红影 发表于 2025-7-4 21:56

这会移动的逐字出现的歌词同步有趣，歌曲也很有道理。
制作漂亮，欣赏杨帆好帖{:4_199:}

红影 发表于 2025-7-4 21:57

动态的使用很漂亮，而且还是一键全控的，点击能全部暂停{:4_187:}

杨帆 发表于 2025-7-4 22:09

红影 发表于 2025-7-4 21:57
动态的使用很漂亮，而且还是一键全控的，点击能全部暂停

鼓捣着玩呢，谢谢影子鼓励{:4_204:}

红影 发表于 2025-7-5 06:56

杨帆 发表于 2025-7-4 22:09
鼓捣着玩呢，谢谢影子鼓励

玩得很出彩啊，给杨帆点赞{:4_187:}

梦江南 发表于 2025-7-5 07:32

制作漂亮，特别是移动歌词，还是第一次看到。欣赏点赞！{:4_199:}

杨帆 发表于 2025-7-5 11:49

红影 发表于 2025-7-5 06:56
玩得很出彩啊，给杨帆点赞

谢谢影子点赞，互相学习，开心第一{:4_187:}

杨帆 发表于 2025-7-5 11:50

梦江南 发表于 2025-7-5 07:32
制作漂亮，特别是移动歌词，还是第一次看到。欣赏点赞！

谢谢江南点赞，互相学习，开心第一{:4_187:}

红影 发表于 2025-7-5 14:45

杨帆 发表于 2025-7-5 11:49
谢谢影子点赞，互相学习，开心第一

太客气了，问好杨帆，周六快乐{:4_187:}
页: [1]
查看完整版本: 怎么可能和谁过都一样 - 学习 忘记了 老师 帖《如果没了你 》