亚伦影音工作室 发表于 2024-6-23 13:10

遇见爱 - 陶钰玉[同步歌词js封装]

本帖最后由 亚伦影音工作室 于 2024-6-29 15:19 编辑 <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/6673e582d9c307b7e9a91a9e.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:60%;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:81;
        background:url(https://pic.imgdb.cn/item/6673e582d9c307b7e9a91a9e.webp)no-repeat -10px 0px/250px 140px;
        }
.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="遇见爱 - 陶钰玉"></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://s2.ananas.chaoxing.com/sv-w9/audio/8d/bd/2b/469f87fed5a0bc1a2816905294741577/audio.mp3" autoplay loop></audio>
<script>
document.write('<script src="https://file.uhsea.com/2406/db8acf3289a2b5d9abee6f38b17827641D.js" type="text/javascript" charset="utf-8"><\/script>');
document.write('<script src="https://file.uhsea.com/2406/5442cd8fce509850ebe623b5d628feda0R.js" type="text/javascript" charset="utf-8"><\/script>');
var lrc = `遇见爱 - 陶钰玉
作词：玉镯儿
作曲：余恒锋
小小的一阵风吹过小山丘
吹散孤单和忧愁
时光中等候人海里漂流
来到缘分的路口
小小的一条河唱着小情歌
星星落在我眼眸
最好的青春和最好的你
是最幸运的拥有
嗨遇见爱遇见爱情的时候
轻轻牵起你的手
天涯或海角路程再遥远
我会陪在你左右
嗨遇见爱遇见爱情的时候
紧紧牵着你的手
把风景看透把爱酿成酒
走到时间的尽头
小小的一条河唱着小情歌
星星落在我眼眸
最好的青春和最好的你
是最幸运的拥有
嗨遇见爱遇见爱情的时候
轻轻牵起你的手
天涯或海角路程再遥远
我会陪在你左右
嗨遇见爱遇见爱情的时候
紧紧牵着你的手
把风景看透把爱酿成酒
走到时间的尽头
嗨遇见爱遇见爱情的时候
轻轻牵起你的手
天涯或海角路程再遥远
我会陪在你左右
嗨遇见爱遇见爱情的时候
紧紧牵着你的手
把风景看透把爱酿成酒
走到时间的尽头
`;
</script>

亚伦影音工作室 发表于 2024-6-23 13:15

本帖最后由 亚伦影音工作室 于 2024-6-23 13:16 编辑

自留地

红影 发表于 2024-6-23 13:25

这变色效果特别好，让美人儿都带了美玉的光泽之感呢{:4_199:}

红影 发表于 2024-6-23 13:25

欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-6-23 14:53

亚伦这个效果非常漂亮，但发现代码哪里有错误，因为加分后会丢出论坛，要重新进来

小辣椒 发表于 2024-6-23 14:53

欣赏亚伦精彩的制作

马黑黑 发表于 2024-6-23 16:55

这个评完分会跑

老谟深虑 发表于 2024-6-23 18:59

         这个到离退休论坛，还是不行。欣赏点赞！
页: [1]
查看完整版本: 遇见爱 - 陶钰玉[同步歌词js封装]