论坛 › 动画音画 › 请【寻梦花园】老师将下面字幕动画放在同步歌词里

亚伦影音工作室 发表于 2025-11-28 10:45

请【寻梦花园】老师将下面字幕动画放在同步歌词里

本帖最后由 亚伦影音工作室 于 2025-11-28 19:45 编辑 <br /><br /><style>

#bj {
      position: relative;
      width: 1286px;
      height: 720px;
      margin-left: -300px;
      margin-top: 0;
       overflow: hidden;z-index:12345;
            background:url(https://pic1.imgdb.cn/item/67162d12d29ded1a8c2f45cf.jpg)no-repeat center/cover;
   
    }

.rotating-text {position: absolute; margin-left: 20%;
      margin-top:20%;
font-family: Lato, sans-serif;
font-weight: 600;
font-size: 46px;
color: white;
transform: translateX(-80px);
}
.rotating-text p {
display: inline-flex;
margin: 0;
vertical-align: top;
}
.rotating-text p .word {
position: absolute;
display: flex;
opacity: 0;
}
.rotating-text p .word .letter {
transform-origin: center center 25px;
}
.rotating-text p .word .letter.out {
transform: rotateX(90deg);
transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
}
.rotating-text p .word .letter.in {
transition: 0.38s ease;
}
.rotating-text p .word .letter.behind {
transform: rotateX(-90deg);
}

.alizarin {
color: #e74c3c;
}

.wisteria {
color: #8e44ad;
}

.peter-river {
color: #3498db;
}

.emerald {
color: #2ecc71;
}

.sun-flower {
color: #f1c40f;
}

#vid {position: absolute;width: 15%; left: 42%; top:74%;height: auto;mix-blend-mode: lighten; cursor: pointer;mask-image: radial-gradient(black 25% ,transparent 75%);
    }

</style>
<div id="bj">
<div class="rotating-text">
       
        <p>
                <span class="word alizarin">做你的红颜知己 (Live合唱版)</span>
                <span class="word wisteria">词：耀隆</span>
<span class="word peter-river">词：耀隆</span>
<span class="word emerald">演唱：大美</span>
<span class="word sun-flower">出品：亚伦</span>
        </p>
</div>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/39/5d21bde6a1eca.mp4" autoplay loop muted></video>
<div class="lyrics">
            <div class="lyric-line">
                  <div class="lyric-mask"></div>
                  <div class="lyric-original"></div>
                </div>
            </div>
</div>
<audio id="audio" src="https://s2.cldisk.com/sv-w8/audio/db/15/8f/b05e398be1d6fb7c829394ab166fbac1/audio.mp3" loop autoplay></audio>
<script>
var words = document.querySelectorAll(".word");
words.forEach(function (word) {
    var letters = word.textContent.split("");
    word.textContent = "";
    letters.forEach(function (letter) {
      var span = document.createElement("span");
      span.textContent = letter;
      span.className = "letter";
      word.append(span);
    });
});
var currentWordIndex = 0;
var maxWordIndex = words.length - 1;
words.style.opacity = "1";
var rotateText = function () {
    var currentWord = words;
    var nextWord = currentWordIndex === maxWordIndex ? words : words;
    // rotate out letters of current word
    Array.from(currentWord.children).forEach(function (letter, i) {
      setTimeout(function () {
            letter.className = "letter out";
      }, i * 80);
    });
    // reveal and rotate in letters of next word
    nextWord.style.opacity = "1";
    Array.from(nextWord.children).forEach(function (letter, i) {
      letter.className = "letter behind";
      setTimeout(function () {
            letter.className = "letter in";
      }, 340 + i * 80);
    });
    currentWordIndex =
      currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;
};
rotateText();
setInterval(rotateText, 4000);
</script>
<script>
vid.onclick = () => audio.paused ? (audio.play(),vid.play()) : (audio.pause(),vid.pause());

mypic.style.animationPlayState = audio.paused ? 'paused' : 'running';
audio.addEventListener('playing', () =>mypic.style.animationPlayState = 'running');
audio.addEventListener('pause', () =>mypic.style.animationPlayState = 'paused');

</script>

红影 发表于 2025-11-28 15:22

这些歌词还会变色呢。跟在后面学习怎样把歌词放进去{:4_187:}

清茶煮雪 发表于 2025-12-3 11:14

设计制作真棒，超赞！{:4_199:}

清茶煮雪 发表于 2025-12-3 11:14

效果漂亮，欣赏问好{:4_190:}

查看完整版本: 请【寻梦花园】老师将下面字幕动画放在同步歌词里