亚伦影音工作室 发表于 2022-6-26 11:07

相思情歌 - 孙艺琪

本帖最后由 亚伦影音工作室 于 2022-6-26 11:08 编辑 <br /><br /><div style="z-index: 127;width: 1200px; height: 620px; margin-top:30px; margin-left:-300px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/30%30%,linear-gradient(80deg, #000080, #003300, #ff0000, #00f000); text-align: center;">
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/2c7498ac25413e72e7566327a2022006.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/136b9ef6e1601733b6a6b4ee83212941.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/e64b09d4a65f30dc84c88ec519f88b16.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/8b6c2ce7904eefbfc9082cc74c15de9e.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/109134f25ea9765b5894d0d38b31d617.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/174df581a00db32cd6ca7789292c4aa2.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/ee89b5fffc63761de48bf7b50ef5e44d.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/0364b23a5489b238a9335bdac0e19c92.jpg" alt="" />


      <span class="items" style="width: 900px; height: 120px;z-index:110;position:absolute;top:30px;left:40px;text-align:left;">亚伦影音工作室</span>
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=70185716&.mp3" controls loop style="width: 1%;
height: 1%;z-index: 1;"></audio>
<div style="width: 100%; height: 100%;z-index:110;position:absolute;top:10px;left:680px;" >
      <div class="btn">
      <imgid="playpause"style="position:absolute;top:-430px;left:50px;width:300px;height:300px;z-index: 600;border-radius:50%; "/>
      <span id="bf"onclick="rbf();"></span>
      </div>
<div class="img_border"><imgid="aplay"style="width: 100%; height: 100%;z-index: 110;background:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com/fs/1e44714e0018e73d7831a10b7ffdaa54.jpg)-20px 0px/180% 100%;" ></div>

</div>

   <div class="items" >
<divclass="lrc">
   <ul id="ullrc">
         </ul>
</div></div></div>
</div>
<style type="text/css">
.photo {width: 1200px;
height: 620px;
position: absolute;top:0px; left:0px;
filter:contrast(130%)brightness(100%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 0;
transform:translate(0%,0%)scale(1);}
5% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
14% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
16% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
24% {
opacity: 0;
transform:translate(0%,0%)scale(1);}
}
img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style >

<style type="text/css">
.container{width: 1px;height: 1px;
    margin: 0;position: absolute;top:500px; left:-20px;z-index: 100;}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;}
.container .btn{
    display: block;z-index: 300;
    margin: 0;}
.container .lrc{
    width: 1000px;
    height: 130px;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:-40px; left:100px;
    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: 70px;
    line-height: 50px;
font-family:华文隶书;
    font-size: 40px;
    color: #000078;
    font-weight: normal;transform: translate(20%,0%);
    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: translate(-20%,30%);
    font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:300px;height:300px;margin:0px ;position: absolute;top:-430px;left:50px;transform: scale(1,1);}
.container .img_border #aplay{display:block;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #880000;border-radius:50%; }
.container .z360z{-webkit-animation:rotating 10s linear infinite;}@-webkit-keyframes rotating{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100%{transform:rotateX(0deg) rotateY(0deg) rotateZ(360deg);}
}
.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 = `相思情歌 - 孙艺琪
词：陈红卫
曲：喜波
编曲：喜波
制作人：亚伦
出品人：亚伦
出品：亚伦影音工作室
也许是前世缘份不够
所以没能陪你到最后
穿过岁月汹涌的河流
任凭思念无力地游走
可能是红尘情路难走
一不小心把你弄丢
于是苦苦守在分别的渡口
望断天涯不见你回眸
我走在灯火阑珊的街头
多少往事随风漂流
是谁在远方挥舞着衣袖
可曾和我一样忧愁
在每个夜深人静的时候
点点相思化作星斗
是谁又唱起老情歌一首
托它带去我的问候
可能是红尘情路难走
一不小心把你弄丢
于是苦苦守在分别的渡口
望断天涯不见你回眸
我走在灯火阑珊的街头
多少往事随风漂流
是谁在远方挥舞着衣袖
可曾和我一样忧愁
在每个夜深人静的时候
点点相思化作星斗
是谁又唱起老情歌一首
托它带去我的问候
我走在灯火阑珊的街头
多少往事随风漂流
是谁在远方挥舞着衣袖
可曾和我一样忧愁
在每个夜深人静的时候
点点相思化作星斗
是谁又唱起老情歌一首
托它带去我的问候
是谁又唱起老情歌一首
托它带去我的问候`;
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 = 50;
    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>
         var aud = document.getElementById("MusicPlayer");
var img = document.getElementById("playpause");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/ceed298ec7ac22c720f96891c3ba0c1a.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/182f640b7552d290db5dc59646a59146.png";
}, false);
</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>

<style>
.items{font-size: 40px;font-family:华文隶书;
      background:linear-gradient(80deg, #ff0000, #fff000, #000079, #00ff00);
      -webkit-background-clip: text;
      color: transparent;animation: slider 0.26s linear infinite ;
    }

@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(150%);}}
    </style>





翁奕童苑 发表于 2022-6-26 11:10

欣赏佳作！点赞！

走过岁月 发表于 2022-6-26 13:16

继续欣赏，非常感谢楼主带来的精彩 {:4_190:}

醉美水芙蓉 发表于 2022-6-26 15:07

红影 发表于 2022-6-26 15:58

这个音乐转盘点击后可以停止音乐，制作真漂亮。给亚伦老师点赞{:4_204:}

小辣椒 发表于 2022-6-26 22:44

精美的制作，感谢分享{:4_187:}

阙歌 发表于 2022-10-2 19:00

拿这个代码练练,谢谢老师!
页: [1]
查看完整版本: 相思情歌 - 孙艺琪