论坛 › 欢乐水吧 › 大眼睛 TO虎妞

东篱闲人 发表于 2023-8-31 22:43

大眼睛 TO虎妞

本帖最后由 东篱闲人 于 2023-9-1 09:14 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1952254">
<br /><br /><style>
#papa{ margin: 10px -300px;width: 1164px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;height: 750px;background:#000000;border: 1px solid;display: grid;position: relative;z-index: 12345; --state: running;}
#mplayer {position:absolute;top:90%;left:2%;cursor: pointer;font: normal 1.6em/0em 华文隶书;
color:#fff000;z-index: 1650;animation: rot 0.5s linear infinite;}
@keyframes rot{0% {opacity: 1;transform: scale(1);}100% {opacity: 1;transform:scale(1);filter:hue-rotate(360deg)contrast(100%)brightness(250%);}}
#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
      position: absolute;z-index: 6;
      left: 52%;
      transform: translate(-50%);
      top: 85%;
      font:normal 1.9em 华文新魏;
      font-weight:200;
      color: #000080;
      white-space: pre;
      -webkit-background-clip: text;
      filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;
      color: transparent;
      overflow: hidden;
      white-space: pre;
      background: var(--bg);
      
      -webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;transform:rotateY(0deg)scale(1)}100% { width: 100%;transform:rotateY(0deg)scale(1);filter:hue-rotate(360deg)}}
@keyframes cover2 { 0% { width: 0%;transform:rotateY(0deg)scale(1)}100% { width: 100%;transform:rotateY(0deg)scale(1);filter:hue-rotate(360deg)}}



.photo {width: 100%;
height: 100%;
position: absolute;z-index: 4;
top:0px; left:0px;
opacity: 0;
animation: round 30s linear infinite;}
@keyframes round{
0% {opacity: 1;transform: scale(1);filter:blur(1px)}
5% {opacity: 1;transform: scale(1);filter:hue-rotate(360deg)contrast(120%)brightness(120%);}
10% {opacity: 1;transform: scale(1);}
27% {opacity: 1;transform:scale(4)rotateY(0deg);filter:blur(0px)}
28% {opacity: 0;transform:scale(4)rotateY(0deg);filter:blur(2px)}
}
.photo:nth-child(1) {animation-delay: 24s;background: url('https://s1.ax1x.com/2023/09/01/pP0NyHU.jpg') no-repeat center/cover;}
.photo:nth-child(2) {animation-delay: 18s;background: url('https://s1.ax1x.com/2023/09/01/pP0Nf3R.jpg') no-repeat center/cover;}
.photo:nth-child(3) {animation-delay: 12s;background: url('https://s1.ax1x.com/2023/09/01/pP0Nhg1.jpg') no-repeat center/cover;}
.photo:nth-child(4) {animation-delay: 6s;background: url('https://s1.ax1x.com/2023/09/01/pP0NTHO.jpg') no-repeat center/cover;}
.photo:nth-child(5) {animation-delay: 0s;background: url('https://s1.ax1x.com/2023/09/01/pP0Nq4H.jpg') no-repeat center/cover;}

.stop .photo:nth-child(1){animation-play-state: paused;}
.stop .photo:nth-child(2){animation-play-state: paused;}
.stop .photo:nth-child(3){animation-play-state: paused;}
.stop .photo:nth-child(4){animation-play-state: paused;}
.stop .photo:nth-child(5){animation-play-state: paused;}
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index: 4;mix-blend-mode: lighten; }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 1.6em华文新魏; opacity: 1; cursor: pointer; z-index: 1660}
</style>
<div id="papa">
<div id="Img" >
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
</div>

<div id='dt' ></div>
<span id="fullscreen">全屏观赏</span>

<div id="lrc" data-lrc="大眼睛">大眼睛</div>
<div id="mplayer" ><span id="bf"></span></div>
                        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=176712.mp3" autoplay="" loop=""></audio>
</div>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = ` 大眼睛 YO虎妞
编辑：东篱闲人
我可以不知道

你的名和姓

我不能不看见

你的大眼睛
我从来不明白

命运是什麽

自与你一相逢

从此不寂寞

你的眼光
似乎对我诉说

好时光千万不要蹉跎

不管你心里是否有个我

我永远为你祝福
愿你快活

我可以不知道

你的名和姓

我不能不看见
你的大眼睛

woohoo

la la yeah yeah yeah

我可以不知道

你的名和姓

我不能不看见

你的大眼睛
我从来不明白

命运是什麽

自与你一相逢

从此不寂寞
你的眼光
似乎对我诉说

好时光千万不要蹉跎

不管你心里是否有个我

我永远为你祝福
愿你快活

我可以不知道

你的名和姓

我不能不看见

你的大眼睛

I'm in love with you

I really love you

I'm in love with you

I really do

我可以不知道

你的名和姓

我不能不看见

你的大眼睛

I'm in love with you

I really love you

I'm in love with you

I really do

I'm in love with you

I really love you

I'm in love with you

I really do



`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
      let tmpAr = [];
      for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
      }
      let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      let calcRule = ;
      for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                              for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                              }
                        }
                }
      }
      lrcAr.sort((a,b)=> a - b);
      return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrcAr;
      lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
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 toMin = (val) => {
      if (!val) return '00:00';
      val = Math.floor(val);
      let min = parseInt(val / 60),
      sec = parseFloat(val % 60);
      if (min < 10) min = '0' + min;
      if (sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.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大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

var imagee= document.getElementById("Img");
var image= document.getElementById("testImg");
var aud= document.getElementById('aud');
    var mplayer=document.getElementById("bf");
mplayer.onclick = function() {
if ( bf.innerText == '') {
            image.stop();aud.pause(); imagee.classList.add('stop');
          bf.innerText="";
      } else {
          image.play();aud.play(); imagee.classList.remove('stop');
            bf.innerText="";
      }
    };

</script>
</td></tr></table> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br>

马黑黑 发表于 2023-8-31 23:29

{:4_199:}

东篱闲人 发表于 2023-9-1 09:06

马黑黑 发表于 2023-8-31 23:29


{:4_191:}

红影 发表于 2023-9-1 09:42

东篱大哥真是有心，用这么漂亮的帖子来迎接虎妞呢。虎妞快来收礼@虎妞{:4_187:}

东篱闲人 发表于 2023-9-1 10:32

红影 发表于 2023-9-1 09:42
东篱大哥真是有心，用这么漂亮的帖子来迎接虎妞呢。虎妞快来收礼@虎妞

马马虎虎，对付玩。。。{:5_117:}

非常开心 发表于 2023-9-1 11:40

享受特效绝美的佳作，我来为你点个赞

东篱闲人 发表于 2023-9-1 12:42

非常开心 发表于 2023-9-1 11:40
享受特效绝美的佳作，我来为你点个赞

啥也不说了，喝水。。。。{:4_190:}

红影 发表于 2023-9-1 13:11

东篱闲人 发表于 2023-9-1 10:32
马马虎虎，对付玩。。。

东篱大哥谦虚{:4_187:}

东篱闲人 发表于 2023-9-1 13:23

红影 发表于 2023-9-1 13:11
东篱大哥谦虚

没有。

红影 发表于 2023-9-1 13:45

东篱闲人 发表于 2023-9-1 13:23
没有。

虎妞的大眼睛来了一眼就能看到这个帖子{:4_173:}

虎妞 发表于 2023-9-1 14:45

来了，来了，去逛街了，刚回来

虎妞 发表于 2023-9-1 14:47

昨晚我咋没看到呢？你也不说给我发个小电报{:4_170:}

虎妞 发表于 2023-9-1 14:49

最最佩服东篱大哥了，能文能水，才艺广泛，感觉就没你不会的{:4_199:}

虎妞 发表于 2023-9-1 14:50

这礼物好漂亮，收藏

虎妞 发表于 2023-9-1 14:51

激动的忘说谢谢了，{:4_170:}
谢谢东篱大哥哥，辛苦了{:4_191:}

虎妞 发表于 2023-9-1 14:52

红影 发表于 2023-9-1 13:45
虎妞的大眼睛来了一眼就能看到这个帖子

说的真对，这大眼睛，啥也漏不掉{:4_170:}

虎妞 发表于 2023-9-1 14:53

东篱闲人 发表于 2023-9-1 13:23
没有。

活泼开朗，太有才的老头，鉴定完毕

虎妞 发表于 2023-9-1 14:54

东篱闲人 发表于 2023-9-1 12:42
啥也不说了，喝水。。。。

我也渴了{:4_189:}

虎妞 发表于 2023-9-1 14:55

非常开心 发表于 2023-9-1 11:40
享受特效绝美的佳作，我来为你点个赞

问好{:4_191:}认识你非常开心{:4_205:}

虎妞 发表于 2023-9-1 14:56

这是你送我的第一个礼物，以后要源源不断的送哈{:4_170:}

查看完整版本: 大眼睛 TO虎妞