论坛 › 欢乐水吧 › 你是我昨夜的梦-王一佳

亚伦影音工作室 发表于 2025-6-15 21:38

你是我昨夜的梦-王一佳

本帖最后由 亚伦影音工作室 于 2025-6-16 17:44 编辑 <br /><br /><style>
        #tz { margin: 30px -300px; width: 1286px;height: 720px;background: url(https://pic1.imgdb.cn/item/683a8ce658cb8da5c81e81d3.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000;overflow: hidden; z-index: 1; position: relative; }
        #btnFs { margin: 30px 1180px; color: #ccc; width: 60px;}
        #tz > canvas { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; }

.lrc{ position: absolute;top:10%; left:5px;
    width: 860px;
    height: 550px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
        z-index: 9;
    overflow: hidden;
    display: block;
    margin: 20px -150px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 50px;
    line-height: 50px;
font-family:悟空大字库;
    font-size: 20px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
    color: #ccc;
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrcli.active{
    font-size: 30px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;
   filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(120deg,#0eaf6d,#ff6ac6 25%,#147b96 50%,#e6d205 55%,#2cc4e0 60%,#8b2ce0 80%,#ff6384 95%,#08dfb4);animation: flowCss 6s infinite linear;
   -webkit-background-size: 200% 100%;}
@keyframes flowCss {
            0% {background-position: 0 0;}
          100% {background-position: -500% 0;}
      }

#ullrc:hover {-webkit-animation: flowCss 4s infinite linear;}
</style>

<div id="tz"><div class="lrc" >
      <ul id="ullrc">
          </ul>
      </div></div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/f7/85/4c/7e962ccbc7ab00f1a7683d2760cb7385/audio.mp3" autoplay loop></audio>

<script type="module">
        import { THREE, scene, camera, renderer, clock, LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js';

        const config = {
                sprite: {
                        number: 200,
                        scale: 0.3,
                        pic: 'https://pic1.imgdb.cn/item/6722130ed29ded1a8c52391c.png',
                        rotation:
                },
                mesh: {
                        pic: 'https://pic1.imgdb.cn/item/684ec37e58cb8da5c84d6b5e.png',
                        color: 0xfff078,
                        transparent: true,
                        position: ,
                        rotate: ,
                        rotation:
                }
        };

        LZ(tz, config);

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshNormalMaterial();
        const cube = new THREE.Mesh(geometry, material);
        cube.rotateX(Math.PI / 4);
        cube.position.set();
        scene.add(cube);
</script>
<script >
var lrc = `你是我昨夜的梦-王一佳
词曲：王敬苹
编曲：王亚东
混音：王亚东
吉他：LeoD
和声：小荷
制作人：陈金文
OP：星汉马文化
什么爱
可以让人越等心越冷
什么愁
可以孤单在雨中
什么酒
可以让人越醉情就越浓
什么恨
转身就已无影踪
你就像是我昨夜的梦点点落在我心中
繁星却照不到泪湿的面孔
为何偏偏而你就是不懂我为你有多心痛
可你却不愿再为我停留一秒钟
你终究已如往事随风负我山水等相逢
可是我却不能再让你感动
情到深处我该怎么从容回首时泪眼朦胧
只求你还能够让我别醒的太匆匆
什么爱
可以让人越等心越冷
什么愁
可以孤单在雨中
什么酒
可以让人越醉情就越浓
什么恨
转身就已无影踪
你就像是我昨夜的梦点点落在我心中
繁星却照不到泪湿的面孔
为何偏偏而你就是不懂我为你有多心痛
可你却不愿再为我停留一秒钟
你终究已如往事随风负我山水等相逢
可是我却不能再让你感动
情到深处我该怎么从容回首时泪眼朦胧
只求你还能够让我别醒的太匆匆`;

function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便

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 = 50, lrc_ul_height = 250;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    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;

</script>

红影 发表于 2025-6-15 22:08

这些立体气泡枕漂亮，变色歌词也很漂亮。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-6-15 23:18

视听盛宴，谢谢亚伦老师精彩分享{:4_191:}

梦油 发表于 2025-6-16 11:21

欣赏佳作，问候亚伦。

樵歌 发表于 2025-6-16 11:31

进来欣赏一会歌曲。谢谢分享！

老谟深虑 发表于 2025-6-16 14:46

         欣赏老师的精彩音画，下面的歌词我这边看在画面外了。

查看完整版本: 你是我昨夜的梦-王一佳