论坛 › 音乐沙龙 › 临摹马黑黑老师“空心”一贴

执著 发表于 2024-3-9 00:05

临摹马黑黑老师“空心”一贴

本帖最后由 执著 于 2024-3-9 00:23 编辑 <br /><br /><style>
#papa {
    margin: 0 0 0 calc(50% - 593px);
    width: 1024px;
    height: 640px;
    background: url('https://pic.imgdb.cn/item/65eb28009f345e8d03f52f14.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    position: relative;
    display: grid;
    place-items: center;
    z-index: 1;
}
#lrc {
    position: absolute;
    top: 10px;
    font: bold 2.4em sans-serif;
    color: lightgreen;
    text-shadow: 1px 1px 1px rgba(0,0,0,.45);
    --ani: lrcGo1;
    --duration: 1s;
}
#lrc::before {
    position: absolute;
    content: attr(data-lrc);
    width: 100%;
    height: 100%;
    color: transparent;
    background: repeating-radial-gradient(lightgreen, red, lightgreen 24px);
    background-clip: text;
    -webkit-background-clip: text;
    clip-path: inset(0 100% 0 0);
    animation: var(--ani) var(--duration) linear forwards var(--state);

}
#btnplay {
    position: absolute;
    bottom: 10px;
    width: 50px;
    height: 50px;
    animation: rotating 6s linear infinite var(--state);
    cursor: pointer;
}
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
</style>

<div id="papa">
    <audio src="https://music.163.com/song/media/outer/url?id=1380476527.mp3 " autoplay loop></audio>
    <div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
    <img id="btnplay" src= "https://pic.imgdb.cn/item/65e8434c9f345e8d039eb0b6.png" alt="" />
</div>

<script>
var geci =[
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
document.querySelector('body').appendChild(sF);
</script>

红影 发表于 2024-3-9 09:07

美丽的大草原，好听的草原歌曲。欣赏执著好帖{:4_199:}

红影 发表于 2024-3-9 09:08

套用代码，做自己喜欢的帖子，这样也很不错呢。其实大家都是这样玩的呢。
执著还换了播放器按钮，很不错的{:4_187:}

樵歌 发表于 2024-3-9 11:16

做得真漂亮！{:4_199:}

小文 发表于 2024-3-9 12:11

做得大气

执著 发表于 2024-3-9 15:31

红影 发表于 2024-3-9 09:08
套用代码，做自己喜欢的帖子，这样也很不错呢。其实大家都是这样玩的呢。
执著还换了播放器按钮，很不错的 ...

谢谢老师奖励！刚接触代码贴，总是迷迷糊糊的！

执著 发表于 2024-3-9 15:32

樵歌 发表于 2024-3-9 11:16
做得真漂亮！

谢谢老师临帖，谬赞了，向大家学习

执著 发表于 2024-3-9 15:33

小文 发表于 2024-3-9 12:11
做得大气

谢谢老师！谬赞了哈

小文 发表于 2024-3-9 16:37

执著 发表于 2024-3-9 15:33
谢谢老师！谬赞了哈

别这样说，叫小文就好！真心不错，喜欢！共勉！

红影 发表于 2024-3-9 22:19

执著 发表于 2024-3-9 15:31
谢谢老师奖励！刚接触代码贴，总是迷迷糊糊的！

做着做着，就会熟悉起来的呢{:4_187:}

查看完整版本: 临摹马黑黑老师“空心”一贴