论坛 › 动画音画 › 《我的世界你曾经来过》蒋婴

焱鑫磊 发表于 2023-3-4 00:22

《我的世界你曾经来过》蒋婴

本帖最后由 焱鑫磊 于 2023-3-12 07:04 编辑 <br /><br /><style>
#papa{margin: 30px -280px ; width: 1164px; height: 640px;background: lightgreen url('https://365.tf/disk/tf/1677921774.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#mplayer {position: absolute;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 10px 4px;display: grid;place-items: center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--bgColor: linear-gradient(to right, var(--prog) 0%, var(--prog) 0%, var(--track) 0%, var(--track));--ww: 260px;--color: hsla(100,10%,80%,.95);--track: hsla(90, 100%, 95%, .65);--prog: hsl(0,50%,50%);}
#btnplay{--state: paused;z-index: 40;
position: absolute;top:-20%; left:40%;
width: 40px;
height: 40px;
cursor: pointer;background:url(https://365.tf/disk/tf/1677924635.png)0px 0px/100% 100%;border-radius:0%;
animation: spin 10s infinite linear;animation-play-state: var(--state);
}
@keyframes spin {0%{transform: rotate(-360deg);filter:hue-rotate(360deg)contrast(120%)brightness(300%)}
100%{transform: rotate(0deg);}
}
#prog {grid-area: prog;-webkit-appearance: none;width: var(--ww); outline: none;background: none;position: relative;}
#prog::-webkit-slider-thumb {-webkit-appearance: none;position: relative;background: var(--prog);top: calc(50% - 10px);cursor: pointer;z-index: 888;}

#prog::-webkit-slider-runnable-track { height: 2px; border-radius: 6px; background: var(--bgColor); }
#prog::-moz-range-track { height: 2px; border-radius: 10px; background: var(--bgColor); }
#cur { grid-area: cur; color: var(--color); }
#dur { grid-area: dur; color: var(--color); }
#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(0deg, #FFF000,#FFF000));position: absolute;font: normal 55px 华文隶书;color:#FF0000;white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 0px #000000);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { width: 0;} to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<style>
#photo {width: 100%;
height: 100%;
position: absolute;z-index: -2;
border:0px solid #ffffff;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation: round 90s linear infinite;
}

@keyframes round{2% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(-280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
8% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0deg)scale(0.8)translate(10%,-10%);
opacity:1
}
10% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1
}
12% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0)scale(.8)translate(10%,-10%);
opacity:1
}

22% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
}

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



.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;
}
.stop #photo:nth-child(6){
animation-play-state: paused;
}
.stop #photo:nth-child(7) {
animation-play-state: paused;
}
.stop #photo:nth-child(8) {
animation-play-state: paused;
}

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

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

.stop #photo:nth-child(15) {
animation-play-state: paused;
}
</style>

<div id="papa">
<div id="testImg" ><div id="items" >
<img alt="" id="photo" src="https://365.tf/disk/tf/1676632382.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676614144.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676601433.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676668629.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676695069.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676644396.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676698273.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676637814.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676611859.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676550717.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676555245.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676605567.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676571860.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676556713.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676549416.jpg" />

</div> </div>

<div id="rotate-words">
<div>《我的世界你曾经来过》<br />
<span>演唱：蒋婴</span></div>

<div>作词：蒋婴<br />
<span>作曲：蒋婴</span></div>

<div>出品：焱鑫磊<br />
<span>Produced by: Yanxinlei</span></div>

<div>LRC歌词制作：焱鑫磊<br />
<span>向亚伦老师学制作</span></div>
<div>代码设计：亚伦<br />
<span>出品时间：2023.3</span></div>

</div>
<div id="lrc" data-lrc="焱鑫磊博客">焱鑫磊博客</div>

<div id="mplayer"><span id="cur">00:00</span><span id="dur">00:00</span><divid="btn"> <span id="btnplay"></span></div><input type="range" id="prog" step="0.1" max="100" value="0" /></div>

</div>
<audio id="aud" src="https://www.joy127.com/url/101316.mp3" loop autoplay></audio>

<script >
(function() {
        (function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',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;let mKey = 0, mFlag = true, mDrag = false;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onmousedown = () =>mDrag =true;prog.onmouseout = () => mDrag = false;prog.onchange = () => { aud.currentTime = aud.duration * prog.value / 100; mDrag = false; };prog.onmousemove = () => prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);aud.addEventListener('timeupdate', () => {cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);if(mDrag===false) prog.value = aud.currentTime / aud.duration * 100;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: 2px 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 = 1, offset = 0;
        let geci = `《我的世界你曾经来过》
词/曲/演唱：蒋婴
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(#FFF000,#FFF000); top: 82%;',
                player_css: '--ww: 240px; right: 40%; bottom: 2%;',
btn_txt: '\&#10059',
        });

        FS({
                pa: papa,
                set: 'backgroun: #333; color: snow; border: 2px solid snow; bottom: 10px; left: 20px;',
        });
})();
var image = document.getElementById("testImg"),
    button = document.getElementById("btn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}

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

</script>

<style type="text/css">
#rotate-words {text-align:center;
position:absolute;z-index: 2;
max-width:800px;
left:0%;
margin:auto;
padding:20% 0;
font-size:3.5em;filter:drop-shadow(#000000 1px 1px 1px);
text-transform:uppercase;
color:#ff0000;
font-family: '华文隶书', sans-serif;
}

#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#fff000;
text-transform:lowercase;
opacity:0.8;
font-family: '华文隶书', sans-serif;
}

#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
left:10vw;
width:80vw;
line-height:1.2em;
animation: rotate-word 36s linear 2 0s;
}

@keyframes rotate-word         {0% {
          opacity: 0;
          transform: translateY(-300%);
        }
        8% {
          opacity: 1;
          transform: translateY(0%);
        }
        17% {
          opacity: 1;
          transform: translateY(0%);
        }
        19% {
          opacity: 0;
          transform: translateY(100%);
        }
        25% { opacity: 0 }
        100% { opacity: 0 }
}
#rotate-words div:nth-child(2) { animation-delay: 6s}
#rotate-words div:nth-child(3) { animation-delay: 12s}
#rotate-words div:nth-child(4) { animation-delay: 18s}
#rotate-words div:nth-child(5) { animation-delay: 24s}
#rotate-words div:nth-child(6) { animation-delay: 30s}
</style>
<style type="text/css">#items {width: 100%;height: 100%;top:0px; left:0px;position: absolute; animation: slider 3s linear infinite ;}
.stop #items{animation-play-state: paused;}
@keyframes slider {0% { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(241, 23, 18, 0.91) 86%); } 100% { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 81, 241, 0.91) 86%);} }
</style>

庶民 发表于 2023-3-4 08:33

这个很有特色。

红影 发表于 2023-3-4 08:51

漂亮的变色音画，欣赏焱鑫磊好帖{:4_187:}

梦缘 发表于 2023-3-4 10:08

老师的帖都很美，欣赏问好！{:4_204:}

焱鑫磊 发表于 2023-3-4 10:32

庶民 发表于 2023-3-4 08:33
这个很有特色。

问候老师好！

焱鑫磊 发表于 2023-3-4 10:33

红影 发表于 2023-3-4 08:51
漂亮的变色音画，欣赏焱鑫磊好帖

问候老师好！

焱鑫磊 发表于 2023-3-4 10:33

梦缘 发表于 2023-3-4 10:08
老师的帖都很美，欣赏问好！

问候老师好！

红影 发表于 2023-3-4 21:48

焱鑫磊 发表于 2023-3-4 10:33
问候老师好！

问好，周末快乐{:4_187:}

查看完整版本: 《我的世界你曾经来过》蒋婴