论坛 › 动画音画 › 《荞麦花》闫辽艳

焱鑫磊 发表于 2023-9-4 08:21

《荞麦花》闫辽艳

本帖最后由 焱鑫磊 于 2023-9-4 08:22 编辑 <br /><br /><style type="text/css">
#hWindow {
width:1200px; height:750px;
bbbackground-image:url(1);
bbbackground-size:cover;
background-color:#ccf;font-size:80px;
bbbborder:thick brown ridge;
position:relative;
margin:100px-300px;
overflow:hidden;
border-radius:0px;
}
#curp {
width: 100%; height:100%;
border:5px solid #ffffff;border-radius:4%;
background-image:url(1);
background-size: cover;
transform-origin: center;
position:absolute; top:-10px; left:0px;
}
#mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 10;
        height: 750px;
        animation: fly 100s linear infinite;
        cursor: pointer;
        opacity: 0;}
#mpicc { position: absolute; top: 0px; left: 0px;
        width: 1200px;z-index: 1;
        height: 750px;
        animation: tot 80s linear infinite;
        cursor: pointer;
        opacity: 0;}
#hWindow:hover #mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 1;
        height: 750px;
        animation: fly 100s linear infinite;
        cursor: pointer;
        opacity: 1; transition: 0.3s; }
#hWindow:hover #mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 1;
        height: 750px;
        animation: tot 80s linear infinite;
        cursor: pointer;
        opacity: 1; transition: 0.3s; }
@keyframes fly {
   0%{ background-position: 600% 0; }
100%{ background-position: 30% 1600%;filter:hue-rotate(360deg) }
}
@keyframes tot {
   0%{ background-position: 0% -1600%; }
100%{ background-position: 0% 0%;filter:hue-rotate(360deg) }
}
</style>

<div id="hWindow">
<div id="curp"></div>

<script type="text/javascript">
(function()        {
var imgSet = [
"https://pic.imgdb.cn/item/64f4bb20661c6c8e54212165.jpg",
"https://pic.imgdb.cn/item/64f4bb3c661c6c8e54212658.jpg",
"https://pic.imgdb.cn/item/64f4bb59661c6c8e54213769.jpg",
"https://pic.imgdb.cn/item/64f4bb75661c6c8e54213be8.jpg",
"https://pic.imgdb.cn/item/64f4bb92661c6c8e54213e24.jpg",
"https://pic.imgdb.cn/item/64f4bbb7661c6c8e54214c19.jpg",
"https://pic.imgdb.cn/item/64f4bbd1661c6c8e5421503a.jpg",
"https://pic.imgdb.cn/item/64f4bbee661c6c8e54215365.jpg"
];
var keyFrames = [
{transform:'perspective(1000px) rotateY(-180deg)scale(.6)',filter:'hue-rotate(0deg)', opacity:'1'},
{transform:'perspective(1000px)rotateY(0deg)scale(.6)', opacity:'1', offset:0.3},
{transform:'perspective(800px)rotateX(90deg)scale(.6)', opacity:'1', offset:0.5},
{transform:'perspective(800px)rotateX(0deg)scale(.6)', opacity:'1', offset:0.8},
{transform:'perspective(800px)rotateX(0deg)scale(.6)', opacity:'0', offset:1},
];
var EffectTiming = {duration: 8000, fill: 'forwards'};
var imgIdx = 0, lastIdx = imgSet.length - 1;
var imgBlock, curp, aniObj;

imgBlock = document.getElementById('hWindow');
curp = document.getElementById('curp');
               
aniObj = curp.animate(keyFrames, EffectTiming);
aniObj.pause();
aniObj.onfinish = () => {
imgIdx++;
imgIdx %= imgSet.length;                       
imgBlock.style.backgroundSize = "cover";
imgBlock.style.backgroundImage = "url(" + imgSet + ")";
curp.style.backgroundImage = "url(" + imgSet + ")";                       
lastIdx = imgIdx;       
aniObj.play();
};

imgBlock.style.backgroundSize = "cover";
imgBlock.style.backgroundImage = "url(" + imgSet + ")";
curp.style.backgroundImage = "url(" + imgSet + ")";
aniObj.play();       
})();
</script>

<!以上是背景部分>

<!以下是播放器部分（歌曲、LRC歌词）>

<div class="papa">
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://i.mp3.wf/view.php/98e88d2958438790d6b5d5d829b98111.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="btn">
<span id="bf"onclick="bf();"style="width: 900px; height: 120px;z-index: 100;position: absolute;top:-80px; left: 0px;"></span>
</div>
<div class="items" >
<divclass="lrc">
<ul id="ullrc">
</ul>
</div>
</div>
</div>
<style type="text/css">
.container{width: 1px;height: 1px; margin: 0;position: absolute;top:680px; left: 120px;z-index: 100; }
.container #MusicPlayer{ width: 250px; display: block; margin: 0 auto; }
.container .btn{ display: block;z-index: 300; margin: 0; }
.container .lrc{
    width: 960px; height: 100px;z-index: 1;
    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:-70px; left:0px; margin: 0 auto;
}
.container .lrc #ullrc{ width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
/*歌词普通样式*/
.container .lrc #ullrc li{
    height: 80px;
    line-height: 90px;
    font-family:悟空大字库;
    font-size: 30px;
    color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;
}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:120px;height:120px;margin:0px ;position: absolute;top:-60px; left:880px;z-index: 150;}
.container .img_border #aplay{ }
.container .z360z{-webkit-animation:rotating 10s linear infinite;animation:rotating 10s linear infinite}@-webkit-keyframes rotating{0% {transform: rotateX(0deg) rotateY(0deg)
rotateZ(0deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-30deg)scale(2.5);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2.5);}
}
.audio{ z-index: 1; bottom: 0; opacity: 0; transition: all 2s; width: 1px;height: 1px; position: absolute;top:0px; left:0px; }
.audio:hover{ opacity: 0; }
</style>

<style type="text/css">.items{ animation: slider1 1s linear infinite ;}
@keyframes slider1 {from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(100%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(110%)brightness(100%);}}
</style>

<script >var lrc = `
《荞麦花》闫辽艳
词：王彬 曲：石焱
LRC歌词制作：焱鑫磊
唱起你的时候我想起了家
又是细雨清凉凉的下
漂泊的心中温馨的牵挂
我那小小儿的荞麦花
想起你的时候我常含泪花
心头涌上滚烫烫的话
亲切切的脸庞笑红了晚霞
我那花眼眼的荞麦花
你总是清凌凌的笑啊
笑成我憨墩墩的梦啊
你那淡蓝蓝的身影
装满我的海角天涯
你在那山坡坡上长啊
长成了九道道的棱啊
你那淡蓝蓝的名字
开在故乡的山洼洼
想起你的时候我常含泪花
心头涌上滚烫烫的话
亲切切的脸庞笑红了晚霞
我那花眼眼的荞麦花
你总是清凌凌的笑啊
笑成我憨墩墩的梦啊
你那淡蓝蓝的身影
装满我的海角天涯
你在那山坡坡上长啊
长成了九道道的棱啊
你那淡蓝蓝的名字
开在故乡的山洼洼
开在故乡的山洼洼

`;
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 = 80, lrc_ul_height = 90;
    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 = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}

$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
      function rbf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            audio.currentTime = 0;
            audio.play();
            bf.innerText="";
      }

      function bf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            if (audio !== null) {
                if (audio.paused) {
                  audio.play(); //audio.play();// 这个就是播放
                  bf.innerText="";
                } else {
                  audio.pause(); // 这个就是暂停
                  bf.innerText="";
                }
            }
      }
</script>

非常开心 发表于 2023-9-4 09:14

欣赏老师制作的特效音画{:4_204:}

红影 发表于 2023-9-4 09:45

这组图图特别清爽养眼，而且跟歌词特别相符。太美了。欣赏焱鑫磊好帖{:4_199:}

红影 发表于 2023-9-4 09:46

这个没找到按钮呢，貌似点歌词同步达到了暂停{:4_173:}

红影 发表于 2023-9-4 09:47

让图图跟歌词能如此完美地结合，真的很不容易的。点赞{:4_199:}

焱鑫磊 发表于 2023-9-4 12:05

非常开心 发表于 2023-9-4 09:14
欣赏老师制作的特效音画

问候朋友好！{:4_204:}

焱鑫磊 发表于 2023-9-4 12:06

红影 发表于 2023-9-4 09:45
这组图图特别清爽养眼，而且跟歌词特别相符。太美了。欣赏焱鑫磊好帖

又是美女出库呢。{:4_185:}

焱鑫磊 发表于 2023-9-4 12:07

红影 发表于 2023-9-4 09:46
这个没找到按钮呢，貌似点歌词同步达到了暂停

点歌词播放/暂停。{:4_181:}

焱鑫磊 发表于 2023-9-4 12:08

红影 发表于 2023-9-4 09:47
让图图跟歌词能如此完美地结合，真的很不容易的。点赞

谢谢红影！{:4_187:}

红影 发表于 2023-9-4 12:54

焱鑫磊 发表于 2023-9-4 12:06
又是美女出库呢。

美女多而且成系列，焱鑫磊的库存真丰富{:4_187:}

红影 发表于 2023-9-4 12:55

焱鑫磊 发表于 2023-9-4 12:07
点歌词播放/暂停。

习惯带按钮的，所以进帖子找了半天呢{:4_173:}

红影 发表于 2023-9-4 12:55

焱鑫磊 发表于 2023-9-4 12:08
谢谢红影！

不客气啊，谢谢焱鑫磊带来的好帖，新周快乐{:4_204:}

查看完整版本: 《荞麦花》闫辽艳