论坛 › 【动感音乐】 › 《想把我唱给你听》半吨兄弟 王小草 （亚伦老师）

焱鑫磊 发表于 2023-5-12 19:25

《想把我唱给你听》半吨兄弟 王小草 （亚伦老师）

<style>
#papa {
      margin: 120px-160px;
       place-items: center;
      width: 1164px;
      height: 620px;
   background:url('https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/663bf23e7639740c41045affdbb1ea27_preview_raw.jpg')no-repeat center/cover;; border-radius: 0%;display: grid;
      box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
      user-select: none;
      position: relative;
      z-index: 1;   
       overflow:hidden;
}

#ppt{
      
       place-items: center;
      width: 100%;
      height: 100%;
mix-blend-mode: hard-light;
      
      user-select: none;
         position: absolute;
      z-index: 1;   
   
}



.photo {width: 100%;
height: 105%;
position: absolute;z-index: 2;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation: round 90s linear infinite;
}

@keyframes round{0% {
opacity: 0;
transform:translate(0%,0%)scale(1);}
8% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
12% {
opacity: 0;
transform:translate(0%,0%)scale(1);}
}

img:nth-child(1) {
animation-delay: 84s;
}
img:nth-child(2) {
animation-delay: 78s;
}
img:nth-child(3) {
animation-delay: 72s;
}
img:nth-child(4) {
animation-delay: 66s;
}
img:nth-child(5) {
animation-delay: 60s;
}
img:nth-child(6) {
animation-delay: 54s;
}
img:nth-child(7) {
animation-delay: 48s;
}
img:nth-child(8) {
animation-delay: 42s;
}
img:nth-child(9) {
animation-delay: 36s;
}
img:nth-child(10) {
animation-delay: 30s;
}
img:nth-child(11) {
animation-delay: 24s;
}
img:nth-child(12) {
animation-delay: 18s;
}
img:nth-child(13) {
animation-delay: 12s;
}
img:nth-child(14) {
animation-delay: 6s;
}
img:nth-child(15) {
animation-delay: 0s;
}


.stop img:nth-child(1) {
animation-play-state: paused;
}
.stop img:nth-child(2){
animation-play-state: paused;
}
.stopimg:nth-child(3){
animation-play-state: paused;
}
.stop img:nth-child(4){
animation-play-state: paused;
}
.stop img:nth-child(5){
animation-play-state: paused;
}
.stop img:nth-child(6){
animation-play-state: paused;
}
.stop img:nth-child(7) {
animation-play-state: paused;
}
.stop img:nth-child(8) {
animation-play-state: paused;
}

.stop img:nth-child(9) {
animation-play-state: paused;
}
.stop img:nth-child(10) {
animation-play-state: paused;
}

.stop img:nth-child(11) {
animation-play-state: paused;
}
.stop img:nth-child(12) {
animation-play-state: paused;
}
.stop img:nth-child(13) {
animation-play-state: paused;
}
.stop img:nth-child(14) {
animation-play-state: paused;
}

.stop img:nth-child(15) {
animation-play-state: paused;
}


#ptpt{width: 100%;
      height: 100%;display: grid;
left: 0%; top:0%;
background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(242, 9, 9, 0) 28%,rgba(255, 2, 2, 0.62) 65%);
position:absolute;
      z-index: 4;
      opacity: 1;
animation: ptpt 3s infinite linear;
}
@keyframes ptpt{0%{filter:hue-rotate(360deg);}100%{filter:hue-rotate(0deg)}}

#ptpu{width: 60%;   
         height: 60%;
left: 0%; top:40%;
position:absolute;opacity: 1;
      z-index: 3;
      
}
#ptpn{width: 200px;display: grid;
         height: 100px;
left: 80%; top:60%;
position:absolute;transform: rotateY(180deg);
      z-index: 5;
      opacity: 1;
}


#mplayer {position: absolute;grid-template-columns: auto auto auto;gap: 8px;display: grid;place-items: center;color: var(--color);font: normal 12px sans-serif;z-index:999;--ww: 900px;--color: #ffffff;--btn_size: 40px;--track: #ffffff;--prog: #ff0000;}

#btnplay {--state: paused;margin-right: 0px;font: bold var(--btn_size) / var(--btn_size) serif;width: 30px;height: 30px;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);background: url(https://www.kumeiwp.com/sub/filestores/2023/02/03/ae5cce101fac9b746e24b475eb4085f2.png)no-repeat center/cover;}
@keyframes rot { to { transform: rotate(1turn); } }
#prog {--xx: 0px;width: var(--ww);height: 2px;border-radius: 8px;background: var(--track);position: relative;cursor: pointer;}
#prog::before {position: absolute;content: '';width: var(--xx);height: 100%;border-radius: 8px;background: var(--prog);}

@keyframes cover1{ 0%{opacity: 1;width: 0%;transform: scale(0.4);filter: hue-rotate(0deg)brightness(100%)}
20%{width: 100%;opacity: 1;transform: scale(1.1);filter: hue-rotate(360deg)brightness(100%)}
100%{width: 100%;opacity: 1;transform:scale(1.1);transform: translate(0%, 0px);}}
@keyframes cover2 {0%{width: 0%;opacity: 1;transform: scale(0.4);filter: hue-rotate(0deg)brightness(100%)}
20%{width: 100%;opacity: 1;transform: scale(1.1);filter: hue-rotate(360deg)brightness(100%)}
100%{width: 100%;opacity: 1;transform:scale(1.1);transform: translate(0%, 0%);}}

#lrc { --motion: cover2; --tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(240, 50%, 50%, .25), hsla(240, 30%, 50%, .75));position: absolute;left: 0%; top:0%;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);font:normal 2.8em 华文隶书;color:#0000; z-index:100; -webkit-background-clip: text; white-space: pre;transform: translate(-30%, 10px);transition-timing-function: cubic-bezier(0.125, 0.830, 0.905, 0.225);}
#lrc::before { position: absolute; content: attr(data-lrc); color: transparent; width: 100%; height: 100%;white-space: pre; background:#880000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
</style>

<div id="papa">
<div id="testImg" >
<img alt="" class="photo" src="https://file.moyublog.com/d/file/2023-01-25/62fb81fb0d283a04709a33818a3eaa8b.jpg" />
<img alt="" class="photo" src="https://file.moyublog.com/d/file/2023-01-17/4cc5ef1c15905c8cd068e04a8296fa3f.jpg" />
<img alt="" class="photo"src="https://file.moyublog.com/d/file/2021-11-19/fygnefjw3oh.jpg" />
<img alt=""class="photo"src="https://file.moyublog.com/d/file/2021-11-13/tq2fnqfjjts.jpg" />
<img alt="" class="photo" src="https://file.moyublog.com/d/file/2021-08-13/x2syt5cahny.jpg" />
<img alt="" class="photo" src="https://file.moyublog.com/d/file/2021-04-20/d5cac24128ae0b8dd3fd4579526d4aae.jpg" />
<img alt="" class="photo" src="https://file.moyublog.com/d/file/2021-03-02/6b61f64082f981a7233d9adf7b80f416.jpg" />
<img alt="" class="photo" src="https://file.moyublog.com/d/file/2021-02-05/3ed4132564ae4dd22e8cb2c792e09628.jpg" />
<img alt="" class="photo" src="https://file.moyublog.com/d/file/2021-02-01/20da1cd3d507d3bd6a96601d96408672.jpg" />
<img alt="" class="photo" src="https://file.moyublog.com/d/file/2021-01-28/a38d2f8dba48dfddba49b25cb10c8666.jpg" />
<img alt="" class="photo" src="https://file.moyublog.com/d/file/2021-01-26/843e47df7a69873285a42996566213c1.jpg" />
<img alt="" class="photo"src="https://file.moyublog.com/d/file/2021-01-09/21b782da3bd8628b7c3ba9fb9026427c.jpg" />
<img alt=""class="photo"src="https://file.moyublog.com/d/file/2020-12-30/c093179782f722afcdbac12e2630a7c0.jpg" />
<img alt="" class="photo" src="https://file.moyublog.com/d/file/2020-12-18/5ad57b02dcaf65c700721bbb23b7d446.jpg" />
<img alt="" class="photo" src="https://file.moyublog.com/d/file/2020-12-11/6294ca70549ca91af80656b1bec0bf7a.jpg" /></div>
<div id="ppt"><img id="pp"src="https://pic2.imgdb.cn/item/64530d620d2dde57771b08ca.gif" width="100%" height="100%"></div>
<div id="ptpt"></div>

<div id="ptpn"><img id="pp0"src="https://pic2.imgdb.cn/item/645611730d2dde5777c30c2f.gif" width="100%" height="100%"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="ptpu"><img id="pp1"src="https://pic2.imgdb.cn/item/643dbb490d2dde5777df1d3c.gif" width="100%" height="100%"></div>
<div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>


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

<script >
(function() {
      (function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 0px; left: 0%; transform: translateX(-50%);',player_css: 'bottom: 0px; ; transform: translateX(-50%);',btn_txt: '✳',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;btnplay.innerHTML = data.btn_txt;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;prog.style.setProperty('--xx', prg + 'px');for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;}};mkPlayer.HCPlayer = playCode;})(this);
      (function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow;background: black; border: 0px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
      let averAdd = 0, offset = 0;
      let geci = `《想把我唱给你听》半吨兄弟 王小草
作词 Lyrics：小柯
作曲 Composer：小柯
演唱 Vocal：半吨兄弟 王小草
出品人 ：亚伦
想把我唱给你听
趁现在年少如花
花儿尽情地开吧
装点你的岁月我的枝桠
谁能够代替你呐
趁年轻尽情的爱吧
最最亲爱的人啊
路途遥远我们在一起吧
我把我唱给你听
我把我唱给你听
把你纯真无邪的笑容给我吧
我们应该有
快乐的
幸福的晴朗的时光
我把我唱给你听
我把我唱给你听
用我炙热的感情感动你好吗
岁月是值得
怀念的留恋的
害羞的红色
谁能够代替你呢
脸庞
趁年轻尽情的爱吧
最最亲爱的人啊
路途遥远我们在一起吧
想把我唱给你听
趁现在年少如花
花儿尽情地开吧
装点你的岁月我的枝桠
谁能够代替你呐
谁能够代替你呐
趁年轻尽情的爱吧
爱吧
最最亲爱的人啊
路途遥远我们在一起吧
我把我唱给你听
我把我唱给你听
把你纯真无邪的笑容给我吧
我们应该有
快乐的
幸福的晴朗的时光
我把我唱给你听
我把我唱给你听
用我炙热的感情感动你好吗
岁月是值得
怀念的留恋的
害羞的红色
啦啦
脸庞
啦啦啦啦啦啦
我们应该有
快乐的
幸福的晴朗的时光
我把我唱给你听
我把我唱给你听
用我炙热的感情感动你好吗
岁月是值得
怀念的留恋的
害羞的红色
谁能够代替你呐
脸庞
趁年轻尽情的爱吧
最最亲爱的人啊
路途遥远
我们在一起吧
亚伦影音工作室`;
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 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));}

      HCPlayer({
                lrcAr: getLrcAr(geci),
                lrc_css: ' --bg: linear-gradient(hsla(90,80%,50%,.35),hsla(100,70%,45%,.6)); top:75%; left: 50%',
                player_css: '--ww: 900px;top:90%;left: 8%;',
                btn_txt: '',
      });

      FS({
                pa: papa,
               
set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 90%; left: 20px;font:normal 2.1em 华文隶书;',
      });
aud.onerror = () => {
                if(aud.error.code === 4) aud.src='https://www.qqmc.com/mp3/music274712607.mp3';
      }
})();

ptpt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>ptpt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>ptpt.style.animationPlayState = 'paused');



   

</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;
            // 透明度还原
             image0.style.opacity = '';image1.style.opacity = '';image2.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"),
image2 = document.getElementById("pp"),

image0 = document.getElementById("pp0"),
image1= document.getElementById("pp1"),
button = document.getElementById("mplayer");
button.onclick = function() {
      if (this.value == '') {
             image0.play(); image1.play();image2.play();image.classList.remove('stop');
            this.value = '.';
      } else {
             image0.stop(); image1.stop();image2.stop(); image.classList.add('stop');
            this.value = '';
      }
    };



</script>

巫荣云师 发表于 2023-5-12 21:05

欣赏收藏老师的[音乐专辑]好看又好听，点赞！

蓝魔 发表于 2023-5-13 00:36

欣赏一下，谢谢。

焱鑫磊 发表于 2023-5-14 00:02

巫荣云师 发表于 2023-5-12 21:05
欣赏收藏老师的[音乐专辑]好看又好听，点赞！

问候老师好！:handshake

焱鑫磊 发表于 2023-5-14 00:02

蓝魔 发表于 2023-5-13 00:36
欣赏一下，谢谢。

问候老师好！:handshake

查看完整版本: 《想把我唱给你听》半吨兄弟 王小草 （亚伦老师）