论坛 › 动画音画 › 不是没有家 不是不想家

亚伦影音工作室 发表于 2024-4-21 16:08

不是没有家 不是不想家

本帖最后由 亚伦影音工作室 于 2024-4-21 16:12 编辑 <br /><br /><style>
#mydiv { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: #333 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d8bba22125e602b9ad053b1665087207.png') no-repeat center/cover; box-shadow: 3px 3px 6px #333; user-select: none; overflow: hidden; z-index: 1; position: relative; }
.vid { position: absolute; object-fit: cover; pointer-events: none; }
.vid:nth-of-type(1) { width: 100%; height: 100%;   opacity: 1; }
.vid:nth-of-type(2) { width: 100%; height: 50%; mix-blend-mode:multiply;   opacity: .4; }
.vid:nth-of-type(3) { bottom: 0; width: 100%; height: 100%; mix-blend-mode: overlay;   opacity: .6; }
#play { position: absolute; right: 150px; top: 50px; animation: rot 6s linear infinite var(--state); z-index: 10; cursor: pointer; }
@Keyframes rot { to { transform: rotate(360deg); } }
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>

<div id="mydiv">
    <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/900aee6efe91219cfec2622706311de0_preview.mp4" loop muted></video>
    <video class="vid" src="https://cdn.pixabay.com/video/2022/11/13/138891-770540401_large.mp4" loop muted></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/2ad34716b27446c100b09e834cd4100e_preview.mp4" loop muted></video>
    <imgid="play" src="https://pic.imgdb.cn/item/65165dfcc458853aeff44557.png" width="100" height="100" alt="" />
<divclass="lrc" >
      <div   id="wzsd1"><ul id="ullrc">
       </ul>
      </div>      
</div>

</div>
<audio id="aud" src="https://s7.krakenfiles.com/uploads/21-04-2024/XXCc4vPw5l/music.m4a" autoplay loop></audio>

<script>
var vids = document.querySelectorAll('.vid');
play.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.onplaying = aud.onpause = () => mState();
var mState = () => {
    mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
    playvid(+aud.paused);
};
var playvid = (flag) => vids.forEach(vid => flag ? vid.pause() : vid.play());

wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
</script>
<style type="text/css">
.lrc{z-index: 4;
    width: 60%;
    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 -1px0);
    display: block;position: absolute;top:85%; left:20%;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: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `不是没有家
00:36.19]不是没有家 不是不想家
只是还有很多的人飘流在天涯
我们也有家 我们也想家
只是还有很多的人飘流在天涯
我的家人 别把我牵挂
现在我们背上行装准备又出发
不躇独行zhu为伴
圣灵引导天各一方四海都是家
不是没有家 不是不想家
只是还有很多的人飘流在天涯
我们也有家 我们也想家
只是还有很多的人飘流在天涯
我的家人 别把我牵挂
现在我们背上行装准备又出发
不躇独行主为伴
圣灵引导天各一方四海都是家
我的家人 别把我牵挂
现在我们背上行装准备又出发
不躇独行主为伴
圣灵引导天各一方四海都是家
`;
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 = 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;
</script>

愤怒的葡萄 发表于 2024-4-21 17:29

进来欣赏一下亚伦的大作。

起个网名好难 发表于 2024-4-21 18:14

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

执著 发表于 2024-4-21 19:43

欣赏老师漂亮的音画{:4_204:}

红影 发表于 2024-4-21 19:59

亚伦老师用了3个视频呢，连背景图都遮挡掉了。{:4_173:}
视频都很好看，相互映衬，效果十分结果精彩{:4_199:}

红影 发表于 2024-4-21 20:57

制作很好，歌名也不错。歌词内容带着天主教的内容呢{:4_173:}

查看完整版本: 不是没有家 不是不想家