梦江南 发表于 2025-10-13 10:46

【月满花潮庆华诞】秋天的落叶


<style>
#papa {
    margin: 80px auto 32px calc(50% - 650px);
    width: 1164px;
    height: 640px;
    background: url('https://cccimg.com/view.php/a2e2d51d92edcc9c8b2fcead202b64b0.gif') no-repeat

center/cover;
    box-shadow: 3px 3px 20px #000;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

#mypic {
    position: absolute;
    width: 100px;
    overflow: hidden;
    border-radius: 50%;
    margin-top: 520px;
    margin-left: 30px;
    cursor: pointer;
    z-index: 99;
    animation: rot 6s infinite linear var(--state);
}

@keyframes rot {
    to {
      transform: rotate(360deg);
    }
}

.lrc {
    width: 100%;
    height: 120px;
    overflow: hidden;
    filter: drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow (#ffffff -1px 0

0) drop-shadow(#ffffff 0 -1px 0);
    display: block;
    position: absolute;
    top: 85%;
    left: -2%;
    z-index: 5;
    margin: 0 auto;
}

.lrc #ullrc {
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}

/*歌词普通样式*/
.lrc #ullrc li {
    height: 70px;
    line-height: 60px;
    font-family: 华文隶书;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    /*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrc li.active {
    font-size: 40px;
    color: #CCFF00;
    text-align: center;
}

</style>
<div id="papa">
<img id="mypic" src="https://cccimg.com/view.php/9a293d14de83e3f0e81dde850b342da4.png" alt="" />
<audio id="aud" src="https://cccimg.com/view.php/3d33fe24130b68d1aa925aedc895c72d.mp3" autoplay loop></audio>

<div class="lrc">
    <ul id="ullrc"></ul>
</div>
</div>
<style type="text/css"></style>

<script >var lrc =`齐旦布唱
RCL编辑：梦江南
我像是秋天的落叶
你握我在手里
陪我伴我吻我疼我
这一次不再孤寂
你看那人潮拥挤
匆匆的来来又去去
你看那红尘万里
还好我有了你
秋天的风啊秋天的雨
秋天的小雨跟着别离
秋 天的故事留给了背影
冷暖是你悲欢是你
谢谢欣赏
有人说那秋天的诗句
写的是我和你
千言万语千歌万曲
道不尽此情此意
你看那人潮拥挤
匆匆的来来又去去
你看那红尘万里
还好我有了你
秋天的风啊秋天的雨
秋天的小雨跟着别离
秋天的故事留给了背影
冷暖是你悲欢是是你
秋天的风啊秋天的雨
秋天的小雨淋着相思
秋天的故事留给了光阴
日出是你月落是你
日出是你
月落是你
`;

function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return {
      seconds: seconds,
      words: words,
      };
    }
}
var lrcArray = getLrcArray();

function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      ullrc.appendChild(li);
    }
}
inputLrc();

function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 70,
      lrc_ul_height = 60;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    ullrc.style.marginTop = -top + "px";
    var activeLi = ullrc.querySelector(".active");
    if (activeLi) {
      activeLi.classList.remove("active");
    }
    ullrc.children.classList.add("active");
}
var turn = 0;

function getLrcIndex() {
    var time = aud.currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
      return index - 1;
      }
    }
}
aud.ontimeupdate = setPosition;
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

梦油 发表于 2025-10-13 11:20

这不就是一幅优秀的油画作品吗！{:5_116:}

梦江南 发表于 2025-10-13 11:40

梦油 发表于 2025-10-13 11:20
这不就是一幅优秀的油画作品吗！

问好梦油，谢谢欣赏。

杨帆 发表于 2025-10-13 11:43

漂亮！谢谢江南精彩分享{:4_204:}

澜天 发表于 2025-10-13 11:47

只看到一个框子
{:4_203:}

梦江南 发表于 2025-10-13 11:50

杨帆 发表于 2025-10-13 11:43
漂亮！谢谢江南精彩分享

问好杨帆，谢谢欣赏。{:4_204:}

梦江南 发表于 2025-10-13 11:53

澜天 发表于 2025-10-13 11:47
只看到一个框子

这是怎么回事呢？这是彩虹上传的可能你的浏览器不支持关系。
问澜天，你是什么浏览器呢？{:4_190:}

澜天 发表于 2025-10-13 12:15

梦江南 发表于 2025-10-13 11:53
这是怎么回事呢？这是彩虹上传的可能你的浏览器不支持关系。
问澜天，你是什么浏览器呢？

我有两个
一个是遨游的
一个就是360的

梦江南 发表于 2025-10-13 12:19

澜天 发表于 2025-10-13 12:15
我有两个
一个是遨游的
一个就是360的

360安全浏览能看到的。

澜天 发表于 2025-10-13 12:47

梦江南 发表于 2025-10-13 12:19
360安全浏览能看到的。

我现在用的就是360的
只看到一个框子
中间的颜色
就是原来的底色
估计我电脑少插件

樵歌 发表于 2025-10-13 13:00

片片枫叶情！这意境非常好！{:4_204:}

红影 发表于 2025-10-13 13:48

好漂亮的制作，欣赏江南好帖{:4_199:}

梦油 发表于 2025-10-13 14:40

梦江南 发表于 2025-10-13 11:40
问好梦油，谢谢欣赏。

不客气

梦江南 发表于 2025-10-13 14:44

澜天 发表于 2025-10-13 12:47
我现在用的就是360的
只看到一个框子
中间的颜色


要360安全浏览器才能看到的。不好意思啦。{:4_201:}

梦江南 发表于 2025-10-13 14:45

樵歌 发表于 2025-10-13 13:00
片片枫叶情！这意境非常好！

问好樵 歌老师，谢谢欣赏，辛苦了！{:4_204:}

梦江南 发表于 2025-10-13 14:47

红影 发表于 2025-10-13 13:48
好漂亮的制作，欣赏江南好帖

问好影子，江南想用花潮币买二枚奖章送给二位老师，可以吗？

梦江南 发表于 2025-10-13 14:48

梦油 发表于 2025-10-13 14:40
不客气

礼貌啦，也是互动。

澜天 发表于 2025-10-13 17:30

梦江南 发表于 2025-10-13 14:44
要360安全浏览器才能看到的。不好意思啦。

没事的
因为我电脑内存小
就不能多下载
所以受限呢

梦江南 发表于 2025-10-13 17:47

澜天 发表于 2025-10-13 17:30
没事的
因为我电脑内存小
就不能多下载


其他的帖子能看到吗？

澜天 发表于 2025-10-13 18:39

梦江南 发表于 2025-10-13 17:47
其他的帖子能看到吗？

还有一个姚云裳唱歌的
至今没有看到
页: [1] 2
查看完整版本: 【月满花潮庆华诞】秋天的落叶