论坛 › 欢乐水吧 › 祝论坛女朋友们节日快乐！【2】

亚伦影音工作室 发表于 2023-3-6 15:02

祝论坛女朋友们节日快乐！【2】

本帖最后由 亚伦影音工作室 于 2023-3-11 23:34 编辑 <br /><br /><style>
#papa{margin: 10px -300px ; width: 1164px; height: 640px;background: lightgreen url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d89a5518621d7711aaa6cd1f3550df26.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 1; overflow:hidden;}

#papa::before{ position: absolute;top:0px; left:0px; content: ''; width: 100%; height: 100%; background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/42014cb258802bb1fe7bc96506aedee3.jpg') no-repeat center/cover; transition:2s;z-index: 2;transform:perspective(600px) rotateX(360deg)scale(1); }
#papa:hover::before { transform:perspective(600px) rotateX(0deg)scale(1);}


#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://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.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);z-index: 888;}
#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>


<div id="papa">
<div id="before" ></div>

<div id="testImg" >
<div class="yh">
<img src="https://365.tf/disk/tf/1678180278.png" alt="" id="boom1">
<img src="https://365.tf/disk/tf/1678180278.png" alt="" id="boom2">
<img src="https://365.tf/disk/tf/1678103532.png" alt="" id="boom3">
</div>
</div>
<div id="rotate-words">
<div>祝论坛女朋友们节日快乐！<br />
<span>亚伦原创音画</span></div>

<div>姐已不是当年的姐<br />
<span>原唱：晓依</span></div>

<div>演唱 思雨<br />
<span>作词：杰哥哥/思雨 作曲：杰哥哥/思雨</span></div>

<div>出品：亚伦影音工作室<br />
<span>Produced by: Aaron Studios</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.kumeiwp.com/sub/filestores/2023/03/11/43587e00c79824ec2096a4d0c9b7b00d.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 = `姐已不是当年的姐
作词：杰哥哥/思雨
作曲：杰哥哥/思雨
原唱：晓依
监制：思雨
出品：亚伦影音工作室
慢慢打开心灵的窗
忘记过去我忘记忧伤
别再彷徨也不再迷茫
人生路途还很漫长
忘记烦恼我尽情歌唱
一路向前要勇敢去闯
姐不再有当年的风光
年华失去已不再漂亮
收获的足迹是心灵创伤
坎坷的人生不再比狂
姐不再是当年的模样
眼角的皱纹两鬓染霜
忘记那过去也别再去想
开心姐姐我开心的唱
人生路途还很漫长
忘记烦恼我尽情歌唱
一路向前要勇敢去闯
姐不再有当年的风光
年华失去已不再漂亮
收获的足迹是心灵创伤
坎坷的人生不再比狂
姐不再是当年的模样
眼角的皱纹两鬓染霜
忘记那过去也别再去想
开心姐姐我开心的唱
姐不再是当年的模样
眼角的皱纹两鬓染霜
忘记那过去也别再去想
开心姐姐我开心的唱
姐姐我开心的歌唱
未经许可,不得翻唱或使用`;

        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>

<style>
.yh{top:0px; left:0px;width: 100%; height: 100%;position: absolute; z-index: 2; overflow:hidden;}
.yh #boom1{position: absolute;top:10%; left:10%;
        opacity: 0;width: 250px;height: 250px;
    animation: bloom 2s ease 1.2s infinite;
}
.stop #boom1{animation-play-state: paused;}
.yh #boom2{width: 200px;height: 200px;
        position: absolute;top:15%; left:50%;
        animation: bloom 2s ease 1.5s infinite;
}
.stop #boom2{animation-play-state: paused;}
.yh #boom3{width: 150px;height: 150px;
        position: absolute;top:15%; left:75%;
animation: bloom 3s ease 1.4s infinite;
}
.stop #boom3{animation-play-state: paused;}
@keyframes bloom{
        0% {
          transform: scale(0,0);
        }
        100% {
                opacity: 1;
          transform: scale(1.5,1.5);filter:hue-rotate(360deg)
        }
}
</style>

大猫咪 发表于 2023-3-6 15:13

好漂亮的制作，借亚伦美帖同祝花潮女神们：节日快乐，开心每一天！

{:4_204:}{:4_204:}{:4_204:}{:4_199:}{:4_199:}

红影 发表于 2023-3-6 16:36

漂亮的制作。感谢言论老师带来的好帖。借帖同祝论坛的姐妹们节日快乐{:4_199:}{:4_187:}

老谟深虑 发表于 2023-3-6 18:16

       欣赏老师的精美制作，大赞！祝论坛女同胞女神节快乐！

梦缘 发表于 2023-3-6 20:14

借老师的靓帖祝花潮女神们：节日快乐，开心每一天！{:4_171:}

查看完整版本: 祝论坛女朋友们节日快乐！【2】