《一生一世守护你》柴强红蔷薇

焱鑫磊 发表于 2023-4-17 11:09

本帖最后由焱鑫磊于 2023-4-17 11:11 编辑 <br /><br /><style>
#papa { margin: 90px-280px; width: 1164px; height: 640px; background: gray url('https://pic.imgdb.cn/item/643cb0c50d2dde5777abdb7d.jpg') center/cover no-repeat; box-shadow:0 0px 0px 3px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 3em 华文隶书; color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%);filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mplayer { position: absolute; width: 120px; height: 180px;left: 8%; z-index: 20;top:65%;overflow:hidden;}

#an{position: absolute;
   top:0%; left:0%;
   width: 100%;
   height:100%;
}
@keyframes cover1{0% { width: 0%;letter-spacing: 0px; filter: blur(0px); } to { width: 500%;} }
@keyframes cover2 {0% { width: 0%;letter-spacing: 10px; color:#000090;}100% { width: 500%; letter-spacing: 0px;color:#ff0000; ; }}
</style>

<div id="papa">
<div id="mydiv">*</div>

<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>

<div id="mplayer">
<img id="an"src="https://pic.imgdb.cn/item/643b26c20d2dde577712571d.gif" width="100%" height="100%"></div>
</div>
<audio id="aud" src="https://www.joy127.com/url/103876.mp3" autoplay loop></audio>

<script>
(function() {
let mKey = 0, mFlag = true;
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;};
let averAdd = 0, offset = 0;
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 geci = `
《一生一世守护你》柴强红蔷薇
词：蓝天曲：大约冬季
LRC歌词制作：焱鑫磊
男：你我曾经不曾相识
是缘分让我们相遇
虽然你我相隔千万里
网络让我们没有了距离
女：爱你爱的好甜蜜
真的好想和你在一起
你我就像那牛郎和织女
天各一方一线不分离
男：牵着你的手和你在一起
万水千山隔不断情谊
我把最美的花儿送给你
你是我的网络知己
女：牵着你的手和你在一起
轻轻呼唤你的名字
你是我心中快乐的旋律
我要一生一世守护你
男：你我曾经不曾相识
是缘分让我们相遇
虽然你我相隔千万里
网络让我们没有了距离
女：爱你爱的好甜蜜
真的好想和你在一起
你我就像那牛郎和织女
天各一方一线不分离
男：牵着你的手和你在一起
万水千山隔不断情谊
我把最美的花儿送给你
你是我的网络知己
女：牵着你的手和你在一起
轻轻呼唤你的名字
你是我心中快乐的旋律
我要一生一世守护你
你我曾经不曾相识
是缘分让我们相遇
虽然你我相隔千万里
网络让我们没有了距离
合：牵着你的手和你在一起
轻轻呼唤你的名字
你是我心中快乐的旋律
男：我要一生一世守护你
女：我要一生一世守护你
合：一生守护你
`;
let lrcAr = getLrcAr(geci);
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.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 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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</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("an"),
button = document.getElementById("mplayer");
if (image && button) {
button.onclick = function() {
   if (this.value == '') {
      image.play();
         this.value = '.';
   } else {
         image.stop();
         this.value = '';
   }
};
}

</script>
<style>
#mydiv {
   margin: 0px auto;
   width: 1164px;
   height: 640px;

   overflow: hidden;
   cursor: pointer;
   position: relative;
   --state: paused;
}
.dot {
   position: absolute;
   left: 40%;
   bottom: -10px;
   width:200PX;opacity:0;
   height:210PX;
   border-radius: 0%;
   background: url('https://pic.imgdb.cn/item/643c03fe0d2dde5777107ce2.png')0 0/100% 100%;
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-620px); filter:hue-rotate(360deg);opacity:1;}}
</style>
<script>
Array.from({length: 100}).forEach( (item,key) => {
   let sp = document.createElement('span');
   let ww = Math.random() * 5 + 2;
   sp.className = 'dot';
   sp.style.cssText += `
            --deg: ${-100 + Math.random() * 200}deg;


            animation: ani 10s ${Math.random() * key - 2}s infinite alternate var(--state);
   `;
   mydiv.appendChild(sp);
});
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>

红影发表于 2023-4-17 12:51

漂亮的动态效果。欣赏焱鑫磊好帖{:4_199:}

焱鑫磊 发表于 2023-4-17 15:29

红影发表于 2023-4-17 12:51
漂亮的动态效果。欣赏焱鑫磊好帖

问好红影！{:4_187:}

明月发表于 2023-4-17 16:01

{:4_187:}{:4_187:}{:4_178:}{:4_178:}

红影发表于 2023-4-17 19:10

焱鑫磊发表于 2023-4-17 15:29
问好红影！

问好焱鑫磊，新周快乐{:4_187:}

页: [1]

花潮论坛's Archiver

《一生一世守护你》柴强 红蔷薇

《一生一世守护你》柴强红蔷薇