重发：想把我唱给你听 - 半吨兄弟/王小草 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2023-5-10 05:58

重发：想把我唱给你听 - 半吨兄弟/王小草

本帖最后由亚伦影音工作室于 2023-5-18 23:08 编辑 <br /><br /><style>
#papa {
   margin: 120px-300px;
   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;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}
@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-10 10:44

这么多的美人儿，这做得漂亮。欣赏亚伦老师好帖{:4_187:}

醉美水芙蓉 发表于 2023-5-10 11:46

小辣椒 发表于 2023-5-10 18:01

亚伦，辛苦，这么早发帖，昨天熬夜了吧

小辣椒 发表于 2023-5-10 18:03

我就用的这种播放器，但拉条不能这么长，否则手机按钮点击不到，会音乐听不到，现在是电脑上来的

小辣椒 发表于 2023-5-10 18:05

现在的变色效果转换比以前好多了，亚伦制作辛苦！

梦缘发表于 2023-5-10 20:34

真美的帖，欣赏问好！{:4_204:}

页: [1]

花潮论坛's Archiver

重发：想把我唱给你听 - 半吨兄弟/王小草