论坛 › 动画音画 › 创意音画《一半疯了一半算了 - 苏谭谭》

亚伦影音工作室 发表于 2022-7-6 12:35

创意音画《一半疯了一半算了 - 苏谭谭》

本帖最后由 亚伦影音工作室 于 2022-7-6 12:35 编辑 <br /><br /><style>
.papa { left: -220px; width: 1100px; height: 620px; border-radius: 6px; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,url(https://img-baofun.zhhainiao.com/fs/15ccd8c376f8099d68a5916c1ac61791.jpg)0 0/100% 100%; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative; }

.papa::before, .papa::after { position: absolute;content: '';border-radius: inherit; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,url(https://img-baofun.zhhainiao.com/fs/1d5519335e3e98489f126de645b529c9.jpg)0 0px/100% 100%;width: 100%; height: 100%; transition: all 6s linear;z-index: 10; }
.papa::before {clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);transform: translate(0%,0%) rotate(0deg) scale(1);opacity: 0;}
.papa::after{clip-path: polygon(25% 100%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 100%);transform: translate(100%,-100%) rotate(0deg) scale(1); opacity: 1; }

.papa:hover::before {clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);transform: translate(0%,0%) rotate(0deg) scale(1); opacity: 1; }
.papa:hover::after{clip-path: polygon(25% 100%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 100%);transform: translate(0%,0%) rotate(0deg) scale(1);opacity: 1;}
</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>
<div class="papa">
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=226029334&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
      <div class="btn">
      <span id="bf"onclick="bf();"style="width: 120px; height: 120px;z-index: 300;position: absolute;top:-60px; left:880px;"></span>
      <span id="bf"onclick="rbf();"></span>
      </div>
<div class="items" >
<div class="img_border"><img src="http://pan.yinhuabbs.cn/view.php/caef5d12b92eaa7fad771e288f5cb7c9.png" id="aplay"style="width: 100%; height: 100%;z-index: 110;" ></div></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:500px; left:-30px;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: 180px;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>

<script >var lrc = `一半疯了一半算了 - 苏谭谭
作词：宋普照
作曲：花僮
编曲：关剑
和声：宋马超
混音：苏洲
出品人：亚伦
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 = 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>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

红影 发表于 2022-7-6 14:33

这个有趣，美女的变化从当中的一小块开始，逐渐变成了另一个美女。很有创意的制作{:4_199:}

红影 发表于 2022-7-6 14:34

时间上搭配得很好呢，分出来的一块走完，正好变化也完成了。欣赏亚伦老师好制作{:4_187:}

马黑黑 发表于 2022-7-6 18:38

俺这里还是有图片打不开

亚伦影音工作室 发表于 2022-7-6 19:22

红影 发表于 2022-7-6 14:34
时间上搭配得很好呢，分出来的一块走完，正好变化也完成了。欣赏亚伦老师好制作

图片显示吗？黑老师说不显示.

醉美水芙蓉 发表于 2022-7-6 21:49

红影 发表于 2022-7-6 22:01

亚伦影音工作室 发表于 2022-7-6 19:22
图片显示吗？黑老师说不显示.

我这里都能看到呢。

大猫咪 发表于 2022-7-7 20:17

制作真棒！ 图美歌靓！欣赏学习，问好朋友！

{:4_204:}{:4_190:}

查看完整版本: 创意音画《一半疯了一半算了 - 苏谭谭》