张红 发表于 2023-6-5 18:07

云菲菲-《爱的漩涡》


<style>
#papa { left: 0px; top: 10px;width: 750px; height: 600px; background: url('http://storage.live.com/items/1965B2B1656C2AF6!16375?') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; bottom: 30px; font: bold 2.4em sans-serif;color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,0%,0%,.95)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(120,75%,75%,.45),hsla(100,100%,75%,.8)); 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%; } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<audio id="aud" src="http://fs.ringop.kugou.com/KGTX/CLTX001/f9ee5d39ad78d02240f7ef3cc887fac2.mp3" autoplay="autoplay" loop="loop"></audio>
<div id="papa">
      <div id="lrc" ></div>
<script>
mKey = 0, mFlag = true, down = true;
      let lrcAr = [,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
      aud.addEventListener('timeupdate', () => {
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) {
cKey = j;if(mKey === j) showLrc(lrcAr);else continue;
}}});
      let calcKey = () => {
for(j = 0; j < lrcAr.length; j ++) {
if(aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}}
if(mKey <0) mKey = 0;
if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);};
      let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};

</script>

巫荣云师 发表于 2023-6-5 20:38

欣赏收藏老师的佳作《爱的漩涡》。:handshake{:1_293:}问好点赞!

久久. 发表于 2023-6-5 22:03

问好张红:handshake{:1_292:}

久久. 发表于 2023-6-5 22:04

谢谢分享！辛苦了！帖子做的漂亮

蓝魔 发表于 2023-6-5 22:26

欣赏一下，谢谢。

容轩听雨 发表于 2023-6-15 08:12

画页美，歌寄情，赞，问好朋友
页: [1]
查看完整版本: 云菲菲-《爱的漩涡》