焱鑫磊 发表于 2023-5-12 22:43

《风儿轻轻吹》任妙音

本帖最后由 焱鑫磊 于 2023-5-13 08:11 编辑 <br /><br /><style>
#papa {
      margin: 100px-280px;
       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(-50%, 30px);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://pic2.imgdb.cn/item/645e430b0d2dde5777e00d33.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e43350d2dde5777e056c8.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e43520d2dde5777e0888f.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e436a0d2dde5777e0b35d.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e43880d2dde5777e0e483.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e43a00d2dde5777e11895.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e43b90d2dde5777e15268.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e43d10d2dde5777e18d08.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e43e70d2dde5777e1c7a1.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e43fe0d2dde5777e202dc.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e44150d2dde5777e29762.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e44360d2dde5777e35114.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e444c0d2dde5777e3c1f1.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e44600d2dde5777e42442.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645e44740d2dde5777e47db9.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.joy127.com/url/104834.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 = `《风儿轻轻吹》任妙音
词/曲:Pull
LRC歌词制作:焱鑫磊
风儿轻轻吹
吹起我的长发
飘散在风中温柔的诉说
期待你的到来
盘起我的发
为我戴上鲜红的玫瑰花
为我戴上鲜红的玫瑰花
风儿轻轻吹
吹起我的长发
丝丝的甜蜜丝丝的牵挂
编织起动人的幸福歌谣
摇到那天边的喜鹊桥
摇到那喜鹊桥
风儿呀吹开了心中的花
又看见花香中你的微笑
带来了一个明媚春天
甜蜜蜜心欢喜
风儿呀吹开了心中的花
又看见花香中你的微笑
带来了一个明媚春天
甜蜜蜜心欢喜
甜蜜心欢喜
风儿轻轻吹
吹起我的长发
丝丝的甜蜜丝丝的牵挂
编织起动人的幸福歌谣
摇到那天边的喜鹊桥
摇到那喜鹊桥
风儿呀吹开了心中的花
又看见花香中你的微笑
带来了一个明媚春天
甜蜜蜜心欢喜
风儿呀吹开了心中的花
又看见花香中你的微笑
带来了一个明媚春天
甜蜜蜜心欢喜
甜蜜心欢喜
甜蜜心欢喜
`;
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.joy127.com/url/104834.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 22:58

制作优美,图片里的人物好美。欣赏焱鑫磊好帖{:4_199:}

亦是金 发表于 2023-5-12 23:22

欣赏美帖!歌曲好听,美女迷人,变色背景,图片变换梦幻!欣赏学习了!{:4_187:}

小辣椒 发表于 2023-5-12 23:25

好奇怪,这个效果就是我测试的一样,手机音乐听到,动图都停止了,效果和电脑不一样

小辣椒 发表于 2023-5-12 23:27

这个按钮手机不放大在边上可以点击,因为最近视力不好,郁闷的

焱鑫磊 发表于 2023-5-12 23:44

红影 发表于 2023-5-12 22:58
制作优美,图片里的人物好美。欣赏焱鑫磊好帖

红影晚上好!{:4_187:}

焱鑫磊 发表于 2023-5-12 23:45

亦是金 发表于 2023-5-12 23:22
欣赏美帖!歌曲好听,美女迷人,变色背景,图片变换梦幻!欣赏学习了!

问候亦是金好!{:4_187:}

焱鑫磊 发表于 2023-5-12 23:46

小辣椒 发表于 2023-5-12 23:25
好奇怪,这个效果就是我测试的一样,手机音乐听到,动图都停止了,效果和电脑不一样

小辣椒晚上好!{:4_187:}

焱鑫磊 发表于 2023-5-12 23:47

小辣椒 发表于 2023-5-12 23:27
这个按钮手机不放大在边上可以点击,因为最近视力不好,郁闷的

千万保护好眼睛哟!视力不好时就休息一下。{:4_204:}

起个网名好难 发表于 2023-5-13 09:52

欣赏佳作!

红影 发表于 2023-5-13 10:04

焱鑫磊 发表于 2023-5-12 23:44
红影晚上好!

问好焱鑫磊,再赏好帖{:4_187:}

梦油 发表于 2023-5-13 10:54

颤颤悠悠树枝上的两只小生灵真可爱。问候焱鑫磊朋友。

焱鑫磊 发表于 2023-5-13 17:46

起个网名好难 发表于 2023-5-13 09:52
欣赏佳作!

问候朋友好!{:4_204:}

焱鑫磊 发表于 2023-5-13 17:49

梦油 发表于 2023-5-13 10:54
颤颤悠悠树枝上的两只小生灵真可爱。问候焱鑫磊朋友。

问候梦油好!{:4_204:}

一斛珠 发表于 2023-5-13 19:13

这种音画一直不会玩

梦油 发表于 2023-5-13 20:05

焱鑫磊 发表于 2023-5-13 17:49
问候梦油好!

谢谢焱鑫磊朋友的问候。

焱鑫磊 发表于 2023-5-13 20:18

一斛珠 发表于 2023-5-13 19:13
这种音画一直不会玩

纯代码音画!{:4_204:}

梦缘 发表于 2023-5-13 20:39

好漂亮的播放器,欣赏点赞!{:4_204:}

焱鑫磊 发表于 2023-5-13 21:42

梦缘 发表于 2023-5-13 20:39
好漂亮的播放器,欣赏点赞!

问候梦缘晚上好!{:4_187:}{:4_187:}{:4_187:}
页: [1]
查看完整版本: 《风儿轻轻吹》任妙音