老谟深虑 发表于 2024-9-10 11:17

老师我想你

本帖最后由 老谟深虑 于 2024-9-11 12:17 编辑 <br /><br />空格今天是教师节，我祝所有的园丁节日快乐！

<style type="text/css">
#papa { margin: 150px 0 20px calc(50% -781px); left: -290px;top:150px;   background:url('https://file.uhsea.com/2408/faafa2d78561d0f84f684b0fc0dc19daCG.jpg') no-repeat center/cover;width: 1400px; height: 700px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#bjbs{animation: rotating 1s linear infinite;width: 1400px; height: 700px;position: absolute;background:url('https://file.uhsea.com/2408/faafa2d78561d0f84f684b0fc0dc19daCG.jpg')no-repeat center/cover;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}

#bfq{position: absolute;
width: 380px;
height: 380px;top:100px; left:10px;z-index: 80;overflow: hidden;transform:translate(0%,0%)scale(1);}
#vinyl{position: absolute;
        left:40px;
        bottom: 30px;
       animation: spin 8slinear infinite;
        display:flex;
        align-items:center;
        justify-content:center;
        width:240px;
        height:240px;
        border-radius:100%;transition: .5s;
        background:url('https://pic.imgdb.cn/item/6430f89c0d2dde57770c848e.png') no-repeat center/cover;
}

@keyframes spin {to { transform: rotate(1turn); }}
#mplayer {position: absolute;
      top:-10px; left:-30px;z-index: 21;
      width: 380px;
      height: 380px;
      cursor: pointer;
}
.pink { background: url('https://pic.imgdb.cn/item/6673ae38d9c307b7e92e8a25.png')no-repeat center/cover;transform:rotate(-2deg);transform-origin: 100% 0%;}
.purple { background: url('https://pic.imgdb.cn/item/6673ae38d9c307b7e92e8a25.png')no-repeat center/cover; transform-origin: 65% 0%;margin: 32px -22px;transform:rotate(-20deg);}
#tz { top:60px;left:1200px;width: 100px; height: 600px; z-index: 1; overflow: hidden; position: absolute; }
      #tz::before { content: attr(data-lrc); position: absolute; left: 20px; top: 0px; width: 80px; height: 100%; writing-mode: vertical-rl; font: normal 40px/90px 微软雅黑; 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);}

</style>
<div id="papa">
<div id="bjbs"> </div>
<div id="tz" data-lrc="恨自己不懂心疼自己 - 恋特特"></div>
<div id="bfq"><div id="mplayer" class="pink"></div>
<div id="vinyl">
        <div class="label"></div>
</div>
</div>
</div>
<audio id="aud" src="https://www.kumeiwp.com/wj/222646/2024/08/28/e6cd31cc01dbfeac024eaced5757a321.mp3" autoplay loop></audio>
   

<script>


mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

vinyl.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>vinyl.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>vinyl.style.animationPlayState = 'paused');
bjbs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bjbs.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bjbs.style.animationPlayState = 'paused');
</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()]);
    });
};
var mState = () => {
    tz.style.setProperty('--state', ['running','paused'][+aud.paused]);

    //其它控制代码
};
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>

<br><br><br><br><br><br><br>

老谟深虑 发表于 2024-9-10 12:02

         我往左边移动不了，不知啥原因。

liumang 发表于 2024-9-10 17:51

代码不正确。你套用别人的？


liumang 发表于 2024-9-10 18:02

别地发是可以居中吗？

liumang 发表于 2024-9-10 18:05

papa { margin: 150px 0 20px calc(50% -781px);   这才是正规居中代码，但你这里没有用，

后面给你加了 left: -290px;top:150px;

liumang 发表于 2024-9-10 18:07

这个不是视频是音画作品，给你移动过去了

小辣椒 发表于 2024-9-10 20:44

欣赏老谟的精彩制作{:5_150:}{:5_150:}

老谟深虑 发表于 2024-9-11 12:19

liumang 发表于 2024-9-10 17:51
代码不正确。你套用别人的？

         老师说的对，我是套用别人的代码制作的。

老谟深虑 发表于 2024-9-11 12:21

liumang 发表于 2024-9-10 18:02
别地发是可以居中吗？

          在离退休论坛可以居中。

老谟深虑 发表于 2024-9-11 12:22

liumang 发表于 2024-9-10 18:05
papa { margin: 150px 0 20px calc(50% -781px);   这才是正规居中代码，但你这里没有用，

后面给你加了 l ...

         谢谢老师帮我修改，学习了！
页: [1] 2
查看完整版本: 老师我想你