亚伦影音工作室 发表于 2025-7-25 19:38

孟婆汤全是眼泪 演唱：珈玥

本帖最后由 亚伦影音工作室 于 2025-7-25 19:43 编辑 <br /><br /><style>
#papa {
      margin: 10px-300px;
      width: 1286px;
      height: 720px;
      background:#000;
      box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;
       }

#tz { margin: 20px 0px; bottom: 0px;width: 840px; height: 300px;position: absolute;z-index:10;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0px;margin: 0px 20px;width: 100%; height: 60px; text-align: center; font: 200 3em/1em 华文隶书; color:#880000; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;background-image: -webkit-linear-gradient(120deg,#000078,#ff6ac6 25%,#00ff00 50%,#e6d205 55%,#2cc4e0 60%,#8b2ce0 80%,#ff0000 95%,#000);
animation: flowCss 6s infinite linear ;
   -webkit-background-size: 200% 100%; }
   .stop #tz::before{animation-play-state: paused;}
   
@keyframes flowCss {
            0% {background-position: 0 0;}
          100% {background-position: -500% 0;}
      }
   
#bt{width: 200px; overflow: hidden; color:#fff; position: absolute; left:75%;text-align: center;bottom: 2%;font-size: 15px; z-index: 19;}
#fullscreen {border-radius: 4px;position: absolute;background:#0000 ;
color:#fff;box-shadow:0px 0px 0px 1px #fff;z-index: 20;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 90%;top: 3%;
}

.zm{list-style: none;left: 0px;width:100%;height:720px;top:16%; position:absolute;z-index: 4;overflow:hidden;}
#e {list-style: none;width: 100%;height:100%;margin: 0px 0px;text-align: center;padding: 50px 0px;position: relative; line-height: 20px;animation: myfirst 60s 4 ;animation-delay: 4s;font: normal 2.2em/1.5em 华文行楷;color: rgb(255, 255, 255,0);transition: all .5s;filter:drop-shadow(#eee 1px 0 0)drop-shadow(#eee 0 1px 0)drop-shadow(#eee -1px 0 0) drop-shadow(#eee 0 -1px 0);}
@keyframes myfirst {0% {opacity: 1;color:#000000;transform:scale(0)}6% {opacity: 1;color: #800000;transform:scale(1)}12% {opacity: 1;color: #800000;transform:scale(1)}40%{opacity: 1;color: rgb(255, 255, 255,0);transform:scale(1); }41%{opacity: 0;color: rgb(255, 255, 255,0);transform:scale(1); }}
.stop #e{animation-play-state: paused;}

</style>

<div id="papa">
<divclass="zm" >
<div id="Img" ><divid="e" ><divstyle="transform: scale(3);">孟婆汤全是眼泪</div><br><div> 作词：刘于谦<br>作曲；徐嘉良<br>演唱：珈玥<br>原唱：艺凌<br>代码独创：亚伦</div></div> </div>
</div>

<span id="fullscreen" title="屏展模式">全屏欣赏</span>
<div id="testImg" ><div id="tz" data-lrc="亚伦影音"></div></div>
<css-doodle id="mplayer">
      :doodle {z-index:80 ;
                @grid: 2 / 260px 60px;
                position: absolute;
                color: var(--color);
                bottom: 5%;left: 72%;
                --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;
      }
      /* 时间信息 : 左 */
      @nth(1) {
                @place: 10% 80%;
                :after { content: var(--ttmsg1); }
      }
      /* 控制器 */
      @nth(2) {
                @size: var(--size);
                clip-path: @shape(
                points: 360;
            r: abs.sin.tan(sin(3.5t)*1.14);
      );
                @place: 45% 35%;
                background: var(--color);
                animation: rot 6s infinite linear var(--state);
      }
      /* 时间信息 : 右 */
      @nth(3) {
                @place: 80% 80%;
                :after { content: var(--ttmsg2); }
      }
      /* 进度条 */
      @nth(4) {
                @place: 40% 80%;
                @size: 100% 2px;
                background: #bbb;
                display: grid;
                place-items: center start;
                :before {
                        content: '';
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
      }
      @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>
<span id="bt">孟婆汤全是眼泪-珈玥</span>
<div id="img" >
      <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                </div>


</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w9/audio/14/35/a8/4b4a527327233ccd05fe98e5c9a33512/audio.mp3" autoplay loop></audio>

<script>
(function() {
      let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
      document.head.appendChild(script);
      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;};
      let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });

      mplayer.onclick = () => {
                if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
                if(clickIdx === 2) aud.currentTime = progChg;
      }
      mplayer.onmousemove = (e) => {
                let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
                clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
                mplayer.style.cursor = cursors;
                if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
      }
})();
</script>
<script>
(function(){
var image = document.getElementById("testImg");
var imagea = document.getElementById("img");
var imagec = document.getElementById("Img");

let mState = () => aud.paused ? (image.classList.add('stop'),imagea.classList.add('stop'),imagec.classList.add('stop')):(image.classList.remove('stop'),imagea.classList.remove('stop'),imagec.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

</script>

<script >
var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};

aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};

var lrc = `
红尘的酒三杯 引相思入味 全是苦味
杯杯名为不悔 却装满伤悲 和心碎
奈何桥上风吹 爱已成了灰 随着风飞
彼岸花在枯萎 那都是因为 沾了眼泪
原来孟婆的汤 全都是眼泪
喝下的人 不会再心碎
忘掉和你的 是是与非非
从此不再是你的谁
如果真的有轮回 我希望和你 不再相会
往事困住了谁曾经的过往早已无所谓
红尘的酒三杯 引相思入味 全是苦味
杯杯名为不悔 却装满伤悲 和心碎
奈何桥上风吹 爱已成了灰 随着风飞
彼岸花在枯萎 那都是因为 沾了眼泪
原来孟婆的汤 全都是眼泪
喝下的人 不会再心碎
忘掉和你的 是是与非非
从此不再是你的谁
如果真的有轮回 我希望和你 不再相会
往事困住了谁曾经的过往早已无所谓
原来孟婆的汤 全都是眼泪
喝下的人 不会再心碎
忘掉和你的 是是与非非
从此不再是你的谁
如果真的有轮回 我希望和你 不再相会
往事困住了谁曾经的过往早已无所谓

`;
getAr(lrc);

</script>
<script>
let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
</script>
<style>
.演员 {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
top:0px; left:0px;
mask: radial-gradient(#000 calc(7% * var(--seed)), transparent calc(7% * var(--seed)));
    mask-size: 200px 200px;
animation: spin 24s infinite linear;
      opacity: 0;
}

.演员:nth-of-type(1) {animation-delay: 20s;
      background: url('https://pic1.imgdb.cn/item/68634c9d58cb8da5c8811794.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(2) {animation-delay: 16s;
      background: url('https://pic1.imgdb.cn/item/683a8cc358cb8da5c81e81b5.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(3) {animation-delay: 12s;
      background: url('https://pic1.imgdb.cn/item/686265e358cb8da5c87f8d9b.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(4) {animation-delay: 8s;
      background: url('https://pic1.imgdb.cn/item/686262c458cb8da5c87f7faf.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(5) {animation-delay: 4s;
      background:url('https://pic1.imgdb.cn/item/68625f9658cb8da5c87f755d.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(6) {animation-delay: 0s;
      background: url('https://pic1.imgdb.cn/item/685cdd5258cb8da5c8724514.jpg')no-repeat center/cover;
      
}
.stop .演员:nth-child(1),
.stop .演员:nth-child(2),
.stop .演员:nth-child(3),
.stop .演员:nth-child(4),
.stop .演员:nth-child(5),
.stop .演员:nth-child(6){animation-play-state: paused;}
@keyframes spin {
    0%{opacity: 1;--seed:0}0.1%{opacity: 1;--seed:1}0.2%{opacity: 1;--seed:2}0.3%{opacity: 1;--seed:3}0.4%{opacity: 1;--seed:4}0.5%{opacity: 1;--seed:5}0.6%{opacity: 1;--seed:6}0.7%{opacity: 1;--seed:7}0.8%{opacity: 1;--seed:8}0.9%{opacity: 1;--seed:9}1%{opacity: 1;--seed:10}1.1%{opacity: 1;--seed:11}1.2%{opacity: 1;--seed:12}1.3%{opacity: 1;--seed:13}1.4%{opacity: 1;--seed:14}1.5%{opacity: 1;--seed:15}16%{opacity: 1;--seed:16}1.7%{opacity: 1;--seed:17}1.8%{opacity: 1;--seed:18}1.9%{opacity: 1;--seed:19}2%{opacity: 1;--seed:20}2.1%{opacity: 1;--seed:21}2.2%{opacity: 1;--seed:22}2.3%{opacity: 1;--seed:23}2.4%{opacity: 1;--seed:24}2.5%{opacity: 1;--seed:25}2.6%{opacity: 1;--seed:26}2.7%{opacity: 1;--seed:27}2.8%{opacity: 1;--seed:28}2.9%{--seed:29}3%{opacity: 1;--seed:30}3.1%{opacity: 1;--seed:31}3.2%{opacity: 1;--seed:32}3.3%{opacity: 1;--seed:33}3.4%{opacity: 1;--seed:34}3.5%{opacity: 1;--seed:35}3.6%{opacity: 1;--seed:36}3.7%{opacity: 1;--seed:37}3.8%{opacity: 1;--seed:38}3.9%{opacity: 1;--seed:39}4%{opacity: 1;--seed:40}4.1%{opacity: 1;--seed:41}4.2%{opacity: 1;--seed:42}4.3%{opacity: 1;--seed:43}4.4%{opacity: 1;--seed:44}4.5%{opacity: 1;--seed:45}4.6%{opacity: 1;--seed:46}4.7%{opacity: 1;--seed:47}4.8%{opacity: 1;--seed:48}4.9%{opacity: 1;--seed:49}5%{opacity: 1;--seed:50}5.1%{opacity: 1;--seed:51}5.2%{opacity: 1;--seed:52}5.3%{opacity: 1;--seed:53}5.4%{opacity: 1;--seed:54}5.5%{opacity: 1;--seed:55}5.6%{opacity: 1;--seed:56}5.7%{opacity: 1;--seed:57}5.8%{opacity: 1;--seed:58}5.9%{opacity: 1;--seed:59}6%{opacity: 1;--seed:60}6.1%{opacity: 1;--seed:61}6.2%{opacity: 1;--seed:62}6.3%{opacity: 1;--seed:63}6.4%{opacity: 1;--seed:64}6.5%{opacity: 1;--seed:65}6.6%{opacity: 1;--seed:66}6.7%{opacity: 1;--seed:67}6.8%{opacity: 1;--seed:68}6.9%{opacity: 1;--seed:69}7%{opacity: 1;--seed:70}7.1%{opacity: 1;--seed:71}7.2%{opacity: 1;--seed:72}7.3%{opacity: 1;--seed:73}7.4%{opacity: 1;--seed:74}7.5%{opacity: 1;--seed:75}7.6%{opacity: 1;--seed:76}7.7%{opacity: 1;--seed:77}7.8%{opacity: 1;--seed:78}7.9%{opacity: 1;--seed:79}8%{opacity: 1;--seed:80}8.1%{opacity: 1;--seed:81}8.2%{opacity: 1;--seed:82}8.3%{opacity: 1;--seed:83}8.4%{opacity: 1;--seed:84}8.5%{opacity: 1;--seed:85}8.6%{opacity: 1;--seed:86}8.7%{opacity: 1;--seed:87}8.8%{opacity: 1;--seed:88}8.9%{opacity: 1;--seed:89}9%{opacity: 1;--seed:90}9.1%{opacity: 1;--seed:91}9.2%{opacity: 1;--seed:92}9.3%{opacity: 1;--seed:93}9.4%{opacity: 1;--seed:94}9.5%{opacity: 1;--seed:95}9.6%{opacity: 1;--seed:96}9.7%{opacity: 1;--seed:97}9.8%{opacity: 1;--seed:98}9.9%{opacity: 1;--seed:99}10%{opacity: 1;--seed:99.5}18%{opacity: 0;--seed:100}
}
</style>

亚伦影音工作室 发表于 2025-7-25 19:38


<style>
.hs-wheel {
    width: 150px; height: 150px;
    border-radius: 50%;
   background: radial-gradient(closest-side, gray, transparent),
      conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
}
</style>
<divclass="hs-wheel" ></div>

梦油 发表于 2025-7-25 20:07

欣赏佳作，问候亚伦。

红影 发表于 2025-7-25 22:34

漂亮的图片轮播和彩色歌词制作，歌曲好听，制作漂亮。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-7-26 00:32

视听盛宴，谢谢亚伦老师精彩分享{:4_190:}

老谟深虑 发表于 2025-7-26 11:04

         制作的漂亮，点赞！
页: [1]
查看完整版本: 孟婆汤全是眼泪 演唱：珈玥