论坛 › 欢乐水吧 › 时间的风

亚伦影音工作室 发表于 2024-6-19 13:58

时间的风

本帖最后由 亚伦影音工作室 于 2024-6-19 16:58 编辑 <br /><br /><style type="text/css">
#papa { margin: 140px 0 20px calc(50% - 681px); background:url('https://pic.imgdb.cn/item/66726ee1d9c307b7e91dcaa9.webp') no-repeat center/cover;width: 1200px; 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: 1200px; height: 700px;position: absolute;background:url('https://pic.imgdb.cn/item/66726ee1d9c307b7e91dcaa9.webp')no-repeat center/cover;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}

#bfq{position: absolute;
width: 350px;
height: 350px;top:100px; left:50px;z-index: 80;overflow: hidden;transform:translate(0%,0%)scale(0.8);}
#vinyl{position: absolute;
        left:30px;
        bottom: 20px;
       animation: spin 8slinear infinite;
        display:flex;
        align-items:center;
        justify-content:center;
        width:260px;
        height:260px;
        border-radius:100%;transition: .5s;
        background:linear-gradient(-45deg,#333,black,#aaa, black,#333);
}
#vinyl:before,#vinyl:after{
        content:'';
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:repeating-radial-gradient(circle at center,#222 4px,transparent 8px);
        border-radius:50%;
}

.label{
        width:120px;
        height:120px;
        border-radius:100%;
        z-index:1;
        background:url(https://pic.imgdb.cn/item/66726ee1d9c307b7e91dcaa9.webp)no-repeat -30px 0px/cover;
       
}
.label:before{
        content:'';
        position:absolute;
        width:12px;
        height:12px;
        border-radius:100%;
        background-color: #fff;
        margin:auto;
        display:block;
        top:0;left:0;right:0;bottom:0;
}
@keyframes spin {to { transform: rotate(1turn); }}
#mplayer {z-index: 80;
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 350px;
        height: 350px;
opacity: 1;
        transition: .2s;
       
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before , #mplayer::after{
        position: absolute;
        content: '';
cursor: pointer;
        transition: .2s;
}
#mplayer::before {
        width: 350px;
        height: 350px;opacity: 1;
        background:url(https://pic.imgdb.cn/item/65f5104b9f345e8d03c1d60f.png)no-repeat center/cover;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 350px;
        height: 350px;opacity: 1;
        background:url(https://pic.imgdb.cn/item/65f5103d9f345e8d03c17eca.png)no-repeat center/cover;
        opacity: var(--disp2);
}

#tz { margin: 0px auto; bottom: 20px;width: 100%; height: 300px;position: absolute;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0; width: 100%; height: 60px; text-align: center; font: normal 34px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}

</style>
<div id="papa">
<div id="bjbs"> </div>
<div id="tz" data-lrc="HUACHAO"></div>

<div id="bfq"><div id="mplayer"></div>
<div id="vinyl">
        <div class="label"></div>
</div>
</div>
</div>
<audio id="aud" src="https://songs.boonkiong.com/246178273.mp3" autoplay loop></audio>
   

<script>

(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
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 = `作词：音宝 | 作曲：音宝 | 编曲：DJ 阿能 |
时间的风
吹散了我的梦
制作人：黄第宏 | 出品人：李彦桦 | OP/SP：金鑫大成
来到这世间
本想光芒万丈
现实却淹没
了心中的理想
也憧憬此生
不负人间一趟
可入梦终究空一场
感叹这半生
有多少痛和伤
青春已远去
心只剩下迷茫
多想能留住
那年少的轻狂
可时间
它走得太匆忙
时间的风
吹散了我的梦
笑谈浮生
故人不再相逢
孤独的夜里
心真的好空洞
那奋勇被命运捉弄
时间的风
吹散了我的梦
蓦然回首
被困在回忆中
渴望有人懂
却无人把我宠
时间的风
吹老了颜容
~Music~
感叹这半生
有多少痛和伤
青春已远去
心只剩下迷茫
多想能留住
那年少的轻狂
可时间
它走得太匆忙
时间的风
吹散了我的梦
笑谈浮生
故人不再相逢
孤独的夜里
心真的好空洞
那奋勇被命运捉弄
时间的风
吹散了我的梦
蓦然回首
被困在回忆中
渴望有人懂
却无人把我宠
时间的风
吹老了颜容
时间的风
吹散了我的梦
笑谈浮生
故人不再相逢
孤独的夜里
心真的好空洞
那奋勇被命运捉弄
时间的风
吹散了我的梦
蓦然回首
被困在回忆中
渴望有人懂
却无人把我宠
时间的风
吹老了颜容
☆谢谢欣赏☆
`;
getAr(lrc);
</script>

梦油 发表于 2024-6-19 14:57

欣赏佳作，问候亚伦。

东篱闲人 发表于 2024-6-19 15:27

这个唱片太精致了。。{:5_116:}

红影 发表于 2024-6-19 16:12

这个歌词制作也是黑黑的阴影效果吧，亚伦老师真快{:4_187:}

红影 发表于 2024-6-19 16:12

变色效果和唱片按钮也很漂亮。欣赏亚伦老师好帖{:4_199:}

老谟深虑 发表于 2024-6-19 16:58

         这个歌词的颜色很好看。

绿叶清舟 发表于 2024-6-19 21:28

漂亮的变色效果，是不是图片很大啊，到现在只看到一半

查看完整版本: 时间的风