论坛 › 欢乐水吧 › 我心化蝶千年 - 安静

亚伦影音工作室 发表于 2022-12-19 14:45

我心化蝶千年 - 安静

<div id="papa">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div>
<divid="tx">

<divid="plane"> </div>
<divid="plane0"> </div>
<div id="midground" ></div>


<div id="img_border" ></div>

</div></div>
<audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1671432093430388.mp3" loop autoplay></audio>

<style>
#papa { margin: 30px -300px ; width: 1164px; height: 640px; background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/27a17d300cb6812837f281e5f1f050ed.jpg)0px 0px/100% 100%; box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10; overflow:hidden;}


.lrc{
    width: 960px;
    height: 125px;
    overflow: hidden;
    display: block;position: absolute;top:500px; left:10px;z-index: 3;
    margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 60px;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);
font-family:悟空大字库;
    font-size: 40px;
    color: #000078;transform: translate(20%,0%);
    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;
transform: translate(-20%,0%);
    font-weight: normal;-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   
   background-image:linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#FEFFFF 62%,#36F4B1 75%);
   background-position: -800px 0;
   filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
   -webkit-animation:loop 5s linear 1;
}
@-webkit-keyframes loop{
   0%{background-position: -800px 0;}
   100%{background-position: -0 0;}
}
   
#tx { position: absolute;
        top: 0px;
        left: 0px;z-index: 2;
        width: 1164px;
        height: 620px;
        animation: tx 2s linear infinite;
        cursor: pointer;}

@keyframes tx {from {filter: hue-rotate(0deg);
        }
to {filter:hue-rotate(360deg)contrast(100%)brightness(120%);}
}
#midground{width: 1164px;height: 620px;position: absolute;
        top: 0px;
        left: 0px;z-index: 2;
    opacity: 1;background: url("https://pic.imgdb.cn/item/639ffe7bb1fccdcd36293272.png")0 0/10% 10%;
animation: cc 3s linear infinite;
}
@keyframes cc{0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(1);filter:hue-rotate(0deg)}
90% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(2);filter:hue-rotate(360deg)}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(1);opacity: 0.4;}
}

#plane {position: absolute;left: -150px;top: 180px;width: 1164px;height: 620px; offset-distance: 0;
offset-path: path("M0 20 Q 100 400, 500 200 T1164 100");background: url("https://pic.imgdb.cn/item/639ffe1fb1fccdcd3628bd35.png")0 0/50% 100%;
animation: move 10s linear infinite;}
#plane0 {position: absolute;left: -450px;top: 200px;width: 1164px;height: 620px;offset-distance: 0;
offset-path: path("M0 20 Q 100 400, 500 200 T1164 100");background: url("https://pic.imgdb.cn/item/639ffe1fb1fccdcd3628bd35.png")0 0/50% 100%;
animation: move0 10s linear infinite;}
@keyframes move { to { offset-distance: 100%;} }
@keyframes move0 { to { offset-distance: 100%;} }
#img_border{display:inline-block;width:150px;height:150px;position: absolute;top:460px; left:900px;z-index: 6; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)0px 0px/100% 100%;border-radius:0%;}
@keyframes rotating{
0%{transform: rotate(-360deg);}
100%{transform: rotate(0deg);}
}
</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 = 80, 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;
plane.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => plane.style.animationPlayState = 'running');
aud.addEventListener('pause', () => plane.style.animationPlayState = 'paused');

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

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

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

img_border.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');
</script>

亚伦影音工作室 发表于 2022-12-19 14:47

H5音画代码

本帖最后由 亚伦影音工作室 于 2022-12-19 14:58 编辑


[*]<div id="papa">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div>
<divid="tx">

<divid="plane"> </div>
<divid="plane0"> </div>
<div id="midground" ></div>


<div id="img_border" ></div>

</div></div>
<audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1671432093430388.mp3" loop autoplay></audio>

<style>
#papa { margin: 30px 30px ; width: 1164px; height: 640px; background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/27a17d300cb6812837f281e5f1f050ed.jpg)0px 0px/100% 100%; box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10; overflow:hidden;}


.lrc{
    width: 960px;
    height: 125px;
    overflow: hidden;
    display: block;position: absolute;top:500px; left:10px;z-index: 3;
    margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 60px;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);
font-family:悟空大字库;
    font-size: 40px;
    color: #000078;transform: translate(20%,0%);
    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;
transform: translate(-20%,0%);
    font-weight: normal;-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   
   background-image:linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#FEFFFF 62%,#36F4B1 75%);
   background-position: -800px 0;
   filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
   -webkit-animation:loop 5s linear 1;
}
@-webkit-keyframes loop{
   0%{background-position: -800px 0;}
   100%{background-position: -0 0;}
}
   
#tx { position: absolute;
        top: 0px;
        left: 0px;z-index: 2;
        width: 1164px;
        height: 620px;
        animation: tx 2s linear infinite;
        cursor: pointer;}

@keyframes tx {from {filter: hue-rotate(0deg);
        }
to {filter:hue-rotate(360deg)contrast(100%)brightness(120%);}
}
#midground{width: 1164px;height: 620px;position: absolute;
        top: 0px;
        left: 0px;z-index: 2;
    opacity: 1;background: url("https://pic.imgdb.cn/item/639ffe7bb1fccdcd36293272.png")0 0/10% 10%;
animation: cc 3s linear infinite;
}
@keyframes cc{0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(1);filter:hue-rotate(0deg)}
90% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(2);filter:hue-rotate(360deg)}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(1);opacity: 0.4;}
}

#plane {position: absolute;left: -150px;top: 180px;width: 1164px;height: 620px; offset-distance: 0;
offset-path: path("M0 20 Q 100 400, 500 200 T1164 100");background: url("https://pic.imgdb.cn/item/639ffe1fb1fccdcd3628bd35.png")0 0/50% 100%;
animation: move 10s linear infinite;}
#plane0 {position: absolute;left: -450px;top: 200px;width: 1164px;height: 620px;offset-distance: 0;
offset-path: path("M0 20 Q 100 400, 500 200 T1164 100");background: url("https://pic.imgdb.cn/item/639ffe1fb1fccdcd3628bd35.png")0 0/50% 100%;
animation: move0 10s linear infinite;}
@keyframes move { to { offset-distance: 100%;} }
@keyframes move0 { to { offset-distance: 100%;} }
#img_border{display:inline-block;width:150px;height:150px;position: absolute;top:460px; left:900px;z-index: 6; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)0px 0px/100% 100%;border-radius:0%;}
@keyframes rotating{
0%{transform: rotate(-360deg);}
100%{transform: rotate(0deg);}
}
</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 = 80, 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;
plane.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => plane.style.animationPlayState = 'running');
aud.addEventListener('pause', () => plane.style.animationPlayState = 'paused');

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

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

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

img_border.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');
</script>

梦缘 发表于 2022-12-19 16:09

很漂亮的帖，感谢老师的代码分享！{:4_204:}

红影 发表于 2022-12-19 16:16

歌词和播放器按钮变色很漂亮，人物变色有点吓人。欣赏亚伦老师好帖{:4_204:}

小辣椒 发表于 2022-12-19 19:49

这个界面移动的人物太大了

查看完整版本: 我心化蝶千年 - 安静