亚伦影音工作室 发表于 2023-9-11 15:32:12

全控HTML代码音画《得不到却偏偏放不下 - 李英》

<style>
#papa { margin: 0px 0 0 calc(50% - 681px); width: 1200px; height: 680px; box-shadow: 0px 0px 0px #000; position: relative; z-index: 1; display: grid; place-items: center; background:#000000; overflow: hidden;}
.photo {width: 100%;
height: 100%;
position: absolute;z-index: 1;
top:0px; left:0px;
opacity: 0;
animation: round 60s linear infinite;-webkit-mask-image: radial-gradient(black 100% ,transparent 100%);}
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:0}
4% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
8% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
12% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
16% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:1}
22% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:0}
}
.photo:nth-child(1) {animation-delay: 48s;background: url('https://pic.imgdb.cn/item/64f4971f661c6c8e541a1fdd.jpg') no-repeat center/cover;}
.photo:nth-child(2) {animation-delay: 36s;background: url('https://pic.imgdb.cn/item/64f49701661c6c8e541a1bb7.jpg') no-repeat center/cover;}
.photo:nth-child(3) {animation-delay: 24s;background: url('https://pic.imgdb.cn/item/64f496c3661c6c8e541a1463.jpg') no-repeat center/cover;}
.photo:nth-child(4) {animation-delay: 12s;background: url('https://pic.imgdb.cn/item/64f4968a661c6c8e541a0c77.jpg') no-repeat center/cover;}
.photo:nth-child(5) {animation-delay: 0s;background: url('https://pic.imgdb.cn/item/64f4966b661c6c8e541a0911.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;}
#prog { position: absolute; bottom: 85%;left: 4%; width: 300px; height: 2px; border: 0px solid lightblue; border-radius: 2px;background: linear-gradient(to right, #880000, #880000 var(--prg), #cccccc 0); color: #ffffff; --prg: 0%; --state: paused; z-index: 20; --play: 0; --pause: 1; --bd: black; --sd: black;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 10px; }
#prog::after { right: 10px; content: attr(data-du); }
#slider { position: absolute; width: 3px; height: 7px; background: snow; left: var(--prg); bottom: -2px;}
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index: 4;mix-blend-mode:lighten;   opacity: 1; }
#btnplay {
      position: absolute;
      width: 40px;
      height: 40px;
top:-50px; left:130px;
      border: 2px solid #FFFFFF;
      border-radius: 50%;
      
      transition: .2s;
      cursor: pointer;
      display: grid;
      place-items: center;
      
}
#btnplay::before, #btnplay::after {
      position: absolute;
      content: '';
      border-style: solid;
      border-color:#ffffff ;
      transition: .1s;
}
#btnplay::before {
      width: 0;
      height: 0;
      left: 15px;
      border-width: 10px 13px;
      border-color: transparent transparent transparent #ffffff;
      opacity: var(--play);
}
#btnplay::after {
      width: 3px;
      height: 18px;
      border-width: 0 5px 0 5px;
      opacity: var(--pause);
}



#lrc {--state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg:#880000;
      position: absolute;z-index: 6;
      left: 52%;
      transform: translate(-50%);
      top: 85%;
      font:normal 3em 华文新魏;
      font-weight:200;
      color: #0000;
      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);}
#flyBox { --w: 220px; width: var(--w); overflow: hidden; color: #cccccc; position: absolute; left:30px;bottom: -30px; font-size: 14px; }
#flyBox div { word-break: keep-all; white-space: nowrap; animation: fly 10s linear infinite; background:#0000}
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}
@keyframes cover1 { from { width: 100%;transform:rotate(0deg)scale(2) }50%{ width: 100%;transform:rotate(0deg)scale(1) } to { width: 100%;transform:rotate(0deg)scale(1); } }
@keyframes cover2 { from { width: 100%; transform:rotate(0deg)scale(2) } 50%{ width: 100%;transform:rotate(0deg)scale(1) } to { width: 100%; transform:rotate(0deg)scale(1) } }
@keyframes rot { to { transform: rotate(-1turn); } }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 100}
</style>
<div id="papa">
<div id="Img" >
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
</div>
<div id="main" >
<div id="stars"></div>
</div>
<span id="fullscreen">全屏显示</span>
<div id='dt' ><img id="testImg" src="https://pic.imgdb.cn/item/64f84824661c6c8e54f9ba5c.gif" width="100%" height="100%"></div>
<div id="lrc" data-lrc="亚伦影音工作室">亚伦影音工作室</div>

<div id="prog" data-cu="00:00" data-du="00:00" title="">
      <span id="btnplay" title="暂停/播放"></span>
<span id="slider"></span>
    <div id="flyBox"><div >   得不到却偏偏放不下 - 李英出品 亚伦影音工作室                </div></div>
</div>

</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music289611986.mp3" autoplay loop></audio>

<script>
(function() {
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 vid = document.querySelector('.vid');
let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'),prog.style.setProperty('--state', 'paused'), vid.pause()) : (lrc.style.setProperty('--state', 'running'),prog.style.setProperty('--state', 'running'), vid.play());

aud.addEventListener('timeupdate', () => {
      prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
      prog.dataset.cu = toMin(aud.currentTime);
      prog.dataset.du = toMin(aud.duration);
var imagee= document.getElementById("Img");

let mState = () => aud.paused ? (btnplay.style.setProperty('--play', '1'),image.stop(), imagee.classList.add('stop') ,btnplay.style.setProperty('--pause', '0')) : (btnplay.style.setProperty('--play', '0'), image.play(), imagee.classList.remove('stop'),btnplay.style.setProperty('--pause', '1'));
btnplay.onclick = (e) => {e.stopPropagation(); aud.paused ? aud.play() : aud.pause();}
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
});

let mKey = 0, mFlag = true;
(function() {
/*lrc*/
let lrcStr = `得不到却偏偏放不下 - 李英
词：李政明
曲：会飞的鱼
编曲：姜凯升（姜山）
制作人：亚伦
OP：亚伦影音工作室
看你又独自潸然泪下
掩饰不住你心乱如麻
是否你还在为他牵挂
是否还盼他悬崖勒马
不要再为爱苦苦挣扎
不要再为他痴痴犯傻
既然他舍得把你抛下
你又何苦还放不下他
曾经的誓言说得太浮夸
一字一句都美丽如画
无奈经不起现实冲刷
终究化成难愈的伤疤
也许这就是痴情的代价
爱得越深越无法自拔
总在痛苦的边缘挣扎
得不到却偏偏放不下
不要再为爱苦苦挣扎
不要再为他痴痴犯傻
既然他舍得把你抛下
你又何苦还放不下他
曾经的誓言说得太浮夸
一字一句都美丽如画
无奈经不起现实冲刷
终究化成难愈的伤疤
也许这就是痴情的代价
爱得越深越无法自拔
总在痛苦的边缘挣扎
得不到却偏偏放不下
曾经的誓言说得太浮夸
一字一句都美丽如画
无奈经不起现实冲刷
终究化成难愈的伤疤
也许这就是痴情的代价
爱得越深越无法自拔
总在痛苦的边缘挣扎
得不到却偏偏放不下
`;

/* 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); /**/
})();
btnplay.onclick = () => {aud.paused ? aud.play() : aud.pause();}
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 image= document.getElementById("testImg");
var btn=document.getElementById("bf");

if ( bf.innerText == '') {
            image.stop();
          bf.innerText=".";
      } else {
          image.play();
            bf.innerText="";
      }

</script>

醉美水芙蓉 发表于 2023-9-11 18:28:16

欣赏亚伦老师佳作！

宇神无敌 发表于 2023-9-11 20:35:57

老师的帖好美，欣赏问好！:victory:

翁奕童苑 发表于 2023-9-12 14:35:59

欣赏精彩的音画！

1643091610 发表于 2023-9-14 21:30:02

这个作品漂亮！！！！

确认过眼神 发表于 2023-9-18 19:54:41

这个作品漂亮！！！！

快播 发表于 2023-9-21 10:26:08

这个作品漂亮！！！！

红尘过客 发表于 2023-10-21 09:38:43

这个作品漂亮！！！！
页: [1]
查看完整版本: 全控HTML代码音画《得不到却偏偏放不下 - 李英》