亦是金 发表于 2022-10-23 17:19

《一路生花》温奕心

本帖最后由 亦是金 于 2026-2-11 12:22 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2340283">

<style>
#papa{position: relative;
            width: 1286px;
            height: 720px;
            margin-left: 10px;
            margin-top: 10px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
            overflow: hidden;z-index:12345;
            background:url(https://pic1.imgdb.cn/item/671af491d29ded1a8c8e7c58.jpg)no-repeat center/cover;
      }
.wrap {
        position: absolute;
        width: 1200px;
        height: 360px;
        margin: 180px 10px;
}
.content {list-style: none;
        position: absolute;
        width: 1200px;
        height: 360px;
}
.content li{box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
        position: absolute;
        background-size: 100% 100%;
       
}

      #lyrics-container {
             position: absolute;
            width: 80%;
            height: 50%;left:0%;
            top: 62%;
      }
      
    :root {
      --lyric-stroke-color: #000;
      --lyric-stroke-width: 2px;   
    }
      .lyric-line {
            position: absolute;
            white-space: nowrap;
            opacity: 0;
            transform: scale(0.1);
            transition: transform 3s, opacity 0.8s, color 4s;
            text-align: center;
         
            
            left:10%;
            top: 20%;
            z-index: 10;
            font: 50 30px '华文隶书', sans-serif;
            margin-left: -200px;
            margin-top: -40px;   

      -webkit-text-stroke: var(--lyric-stroke-width) var(--lyric-stroke-color);
      text-stroke: var(--lyric-stroke-width) var(--lyric-stroke-color);
      paint-order: stroke fill;
      }
      
      #audio-controls {
            position: fixed;
            bottom: 20px;
            z-index: 100;
            display: none;
      }
      
      #spectrum-container {
            position: absolute;
            width: 1100px;
            height: 640px;
            top: 40px;
            left: 50px;
            pointer-events: none;
            z-index: 5;
      }
      
      .butterfly {
            position: absolute;
            width: 30px;
            height: 30px;
            background-size: contain;
            background-repeat: no-repeat;
            transform-origin: center;
            transition: transform 0.1s;
      }
      
      
      #progress-container {
            position: absolute;
            left: 551px;
            top: 41px;
            transform: translateX(-50%);
            width: 120px;
            height: 120px;
            z-index: 100;
      }
      
      #progress-circle {
            fill: transparent;
            stroke: #880000;
            stroke-width: 5;
            stroke-dasharray: 339.6;
            stroke-dashoffset: 339.6;
            transform: rotate(-90deg);

小辣椒 发表于 2022-10-23 18:17

非常棒~~~这个视频里面的歌词同步运用效果非常好

小辣椒 发表于 2022-10-23 18:18

这个swf背景加一个人物效果也是特别美，欣赏亦是金好制作{:4_199:}

亦是金 发表于 2022-10-23 19:48

小辣椒 发表于 2022-10-23 18:18
这个swf背景加一个人物效果也是特别美，欣赏亦是金好制作

谢谢老师欣赏点赞！向你学习，请多指教！

相约爱晚亭 发表于 2022-10-23 22:35

欣赏精美音画佳作！

红影 发表于 2022-10-23 23:41

漂亮的制作，欣赏亦是金老师的精美制作{:4_187:}
页: [1]
查看完整版本: 《一路生花》温奕心