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

亚伦影音工作室 发表于 2023-3-5 19:01

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

本帖最后由 亚伦影音工作室 于 2023-3-9 16:13 编辑 <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/0f627ea8ecff27a9bab79aa53407ab32.jpg') no-repeat center/cover; transition: .7s;z-index: 2;filter: saturate(180%); }
#papa:hover::before { transform: rotateY(180deg); filter: saturate(0%); }
#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"><div id="#items">
<img src="https://365.tf/disk/tf/1677724247.png" alt="" id="boom1">
<img src="https://365.tf/disk/tf/1677724247.png" alt="" id="boom2">
<img src="https://365.tf/disk/tf/1677724247.png" alt="" id="boom3">
</div>
</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.qqmc.com/up/kwlink.php?id=72195770" 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: 150px;height: 150px;
    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-5 19:25

这个视频很有水准，点赞。

阿狄丽娜 发表于 2023-3-5 19:25

太美了！这个图我能用来当头像吗？

红影 发表于 2023-3-5 19:29

这个背景图漂亮，跟洋娃娃似的。欣赏亚伦老师好帖，借帖同祝论坛的女同胞们女神节快乐{:4_199:}

亚伦影音工作室 发表于 2023-3-5 20:08

阿狄丽娜 发表于 2023-3-5 19:25
太美了！这个图我能用来当头像吗？

过奖了 尽管用！

绿叶清舟 发表于 2023-3-5 20:59

谢谢亚伦，高清的啊制作漂亮

醉美水芙蓉 发表于 2023-3-5 21:11

晓哥 发表于 2023-3-6 13:22

图片变换好看，歌词制作抢眼，赏图听乐，点赞！

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