烟嗓船长 - 恰好你风情万种【在线切换】 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2025-7-2 10:21

烟嗓船长 - 恰好你风情万种【在线切换】

本帖最后由亚伦影音工作室于 2025-7-6 15:51 编辑 <br /><br /><style>
#papa {
   margin: 150px-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) }}
.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.ananas.chaoxing.com/sv-w9/audio/c0/54/95/f5802b1aef6ba5b51632ea80c3b88796/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: linear-gradient(270deg, #000 calc(6.5% * var(--seed)), transparent calc(6.5% * var(--seed)));
mask-size: 100px 100px;
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-2 10:27

在代码中找到 mask: linear-gradient(270deg, #000 calc(6.5% * var(--seed)), transparent calc(6.5% * var(--seed)));
然后改变270deg里面的数字即可呈现不同的切换效果，请赶快试试吧！

梦油发表于 2025-7-2 10:45

欣赏佳作，问候亚伦。

红影发表于 2025-7-2 11:17

修改代码才能实现的切换效果，应该算不上是在线切换吧{:4_173:}

红影发表于 2025-7-2 11:17

制作很漂亮，欣赏亚伦老师好帖{:4_199:}

杨帆发表于 2025-7-2 12:06

亚伦影音工作室发表于 2025-7-2 10:27
在代码中找到 mask: linear-gradient(270deg, #000 calc(6.5% * var(--seed)), transparent calc(6.5% * va ...

授人以渔，欣赏亚伦老师大师风范{:4_176:}

亚伦影音工作室 发表于 2025-7-2 13:06

红影发表于 2025-7-2 11:17
制作很漂亮，欣赏亚伦老师好帖

等等会实现的！

红影发表于 2025-7-2 22:20

亚伦影音工作室发表于 2025-7-2 13:06
等等会实现的！

嗯嗯，问好亚伦老师{:4_187:}

老谟深虑 发表于 2025-7-3 18:36

欣赏老师的代码音画，收藏学习。谢谢！

页: [1]

花潮论坛's Archiver

烟嗓船长 - 恰好你风情万种【在线切换】