论坛 › 动画音画 › 彭沛绮 - 难念的经

亚伦影音工作室 发表于 2023-4-20 13:44

彭沛绮 - 难念的经

<style>
#papa { margin: 10px -300px ; width: 1164px; height: 620px; background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,url(https://pic.imgdb.cn/item/6440cc3c0d2dde57773efc00.jpg) center/cover no-repeat; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #800000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;border-radius: 0px 0px;}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 11}
#mplayer {margin:0 auto;
position: absolute;top:5%; left:15%;
width: 300px;
height: 540px;
cursor: pointer;
animation: spin 10s infinite linear;
}
.leaf {position: absolute;
width: 40%;
height: 40%;
border-radius: 0px 100px;
border:3px solid #00f000;
transform-origin: 120% 120%;
}


.leaf:nth-of-type(1) {background:url(https://pic.imgdb.cn/item/6440cbb40d2dde57773e4539.jpg) center/cover no-repeat;
transform: rotate(60deg)translateX(60px);
}

.leaf:nth-of-type(2) {background:url(https://pic.imgdb.cn/item/6440b79d0d2dde57772447d6.jpg) center/cover no-repeat;
transform: rotate(120deg)translateX(60px);
}
.leaf:nth-of-type(3) {background:url(https://pic.imgdb.cn/item/6440b7c60d2dde5777247178.jpg) center/cover no-repeat;
transform: rotate(180deg)translateX(60px);
}
.leaf:nth-of-type(4) {background:url(https://pic.imgdb.cn/item/6440cbd70d2dde57773e7877.png) center/cover no-repeat;
transform: rotate(240deg)translateX(60px);
}
.leaf:nth-of-type(5) {background:url(https://pic.imgdb.cn/item/6440ce8c0d2dde577742c6df.jpg) center/cover no-repeat;
transform: rotate(300deg)translateX(60px);
}
.leaf:nth-of-type(6) {background:url(https://pic.imgdb.cn/item/6440cbff0d2dde57773ead84.jpg) center/cover no-repeat;
transform: rotateZ(360deg)translateX(60px);
}
@keyframes spin {0% { transform: rotate(-360deg);filter:hue-rotate(0deg) }
}
</style>
<style type="text/css">
#ganguang {width: 100%;
height: 100%;
position: absolute;top:0px; left:0px;z-index: 1;}
.span {
width: 20vmin;
height: 20vmin;
border-radius: 40vmin;
backface-visibility: hidden;
position: absolute;
animation-name: move;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;}
.span:nth-child(1) {
color: #E45A84;
top: 18%;
left: 90%;
animation-duration: 14.4s;
animation-delay: -7.3s;
transform-origin: 8vw -20vh;
box-shadow: 40vmin 0 7.5825118355vmin currentColor;
}
.span:nth-child(2) {
color: #E45A84;
top: 85%;
left: 44%;
animation-duration: 13.9s;
animation-delay: -15.3s;
transform-origin: -23vw 19vh;
box-shadow: -40vmin 0 7.0535658472vmin currentColor;
}
.span:nth-child(3) {
color: #E45A84;
top: 31%;
left: 94%;
animation-duration: 14.4s;
animation-delay: -14s;
transform-origin: -10vw -19vh;
box-shadow: -40vmin 0 6.3282530813vmin currentColor;
}
.span:nth-child(4) {
color: #583C87;
top: 32%;
left: 72%;
animation-duration: 11.1s;
animation-delay: -11s;
transform-origin: 22vw 3vh;
box-shadow: 40vmin 0 9.0598358039vmin currentColor;
}
.span:nth-child(5) {
color: #E45A84;
top: 60%;
left: 8%;
animation-duration: 15s;
animation-delay: -10.5s;
transform-origin: 5vw -1vh;
box-shadow: -40vmin 0 13.3208706669vmin currentColor;
}
.span:nth-child(6) {
color: #ff0000;
top: 90%;
left: 48%;
animation-duration: 13.6s;
animation-delay: -5.2s;
transform-origin: 24vw 15vh;
box-shadow: 40vmin 0 15.7532629644vmin currentColor;
}
.span:nth-child(7) {
color: #583C87;
top: 59%;
left: 28%;
animation-duration: 11s;
animation-delay: -11.5s;
transform-origin: -20vw 18vh;
box-shadow: -40vmin 0 11.9539838986vmin currentColor;
}
.span:nth-child(8) {
color: #E45A84;
top: 48%;
left: 52%;
animation-duration: 14.3s;
animation-delay: -3.9s;
transform-origin: 9vw 10vh;
box-shadow: -40vmin 0 9.0533535457vmin currentColor;
}
.span:nth-child(9) {
color: #583C87;
top: 44%;
left: 59%;
animation-duration: 13.5s;
animation-delay: -12.7s;
transform-origin: 19vw -11vh;
box-shadow: 40vmin 0 6.6089531139vmin currentColor;
}
.span:nth-child(10) {
color: #E45A84;
top: 43%;
left: 64%;
animation-duration: 11.1s;
animation-delay: -6s;
transform-origin: 9vw 0vh;
box-shadow: -40vmin 0 5.726542192vmin currentColor;
}
.span:nth-child(11) {
color: #FFACAC;
top: 59%;
left: 95%;
animation-duration: 10.8s;
animation-delay: -3.9s;
transform-origin: 9vw -15vh;
box-shadow: -40vmin 0 11.0535574125vmin currentColor;
}
.span:nth-child(12) {
color: #583C87;
top: 70%;
left: 97%;
animation-duration: 12.6s;
animation-delay: -3.5s;
transform-origin: -21vw -24vh;
box-shadow: -40vmin 0 12.463832706vmin currentColor;
}
.span:nth-child(13) {
color: #E45A84;
top: 52%;
left: 91%;
animation-duration: 14.6s;
animation-delay: -11.4s;
transform-origin: -15vw 13vh;
box-shadow: -40vmin 0 13.9327650237vmin currentColor;
}
.span:nth-child(14) {
color: #00ff00;
top: 50%;
left: 1%;
animation-duration: 10.4s;
animation-delay: -7.8s;
transform-origin: 24vw 0vh;
box-shadow: -40vmin 0 12.7768318488vmin currentColor;
}
.span:nth-child(15) {
color: #FFACAC;
top: 60%;
left: 29%;
animation-duration: 12.8s;
animation-delay: -7.7s;
transform-origin: 7vw -15vh;
box-shadow: 40vmin 0 5.7092398504vmin currentColor;
}
.span:nth-child(16) {
color: #FFACAC;
top: 48%;
left: 100%;
animation-duration: 13.5s;
animation-delay: -3s;
transform-origin: -22vw 2vh;
box-shadow: 40vmin 0 7.8329143448vmin currentColor;
}
.span:nth-child(17) {
color: #E45A84;
top: 20%;
left: 63%;
animation-duration: 11.8s;
animation-delay: -1.9s;
transform-origin: 12vw -20vh;
box-shadow: -40vmin 0 8.4443044151vmin currentColor;
}
.span:nth-child(18) {
color: #000060;
top: 29%;
left: 50%;
animation-duration: 16s;
animation-delay: -1.2s;
transform-origin: 20vw -8vh;
box-shadow: -40vmin 0 10.8986254969vmin currentColor;
}
.span:nth-child(19) {
color: #583C87;
top: 2%;
left: 80%;
animation-duration: 14.7s;
animation-delay: -8.1s;
transform-origin: -7vw -2vh;
box-shadow: -40vmin 0 12.9483961237vmin currentColor;
}
.span:nth-child(20) {
color: #fff000;
top: 93%;
left: 35%;
animation-duration: 10.8s;
animation-delay: -1s;
transform-origin: -1vw 5vh;
box-shadow: -40vmin 0 13.4811190658vmin currentColor;
}

@keyframes move {
100% {
    transform: translate3d(0, 0, 1px) rotate(-360deg)scale(1.2);
}
}
.stop .span {animation-play-state: paused;}
.stop .span:nth-child(1) {animation-play-state: paused;}
.stop .span:nth-child(2) {animation-play-state: paused;}
.stop .span:nth-child(3) {animation-play-state: paused;}
.stop .span:nth-child(4) {animation-play-state: paused;}
.stop .span:nth-child(5) {animation-play-state: paused;}
.stop .span:nth-child(6) {animation-play-state: paused;}
.stop .span:nth-child(7) {animation-play-state: paused;}
.stop .span:nth-child(8) {animation-play-state: paused;}
.stop .span:nth-child(9) {animation-play-state: paused;}
.stop .span:nth-child(10){animation-play-state: paused;}
.stop .span:nth-child(11){animation-play-state: paused;}
.stop .span:nth-child(12){animation-play-state: paused;}
.stop .span:nth-child(13){animation-play-state: paused;}
.stop .span:nth-child(14){animation-play-state: paused;}
.stop .span:nth-child(15){animation-play-state: paused;}
.stop .span:nth-child(16){animation-play-state: paused;}
.stop .span:nth-child(17){animation-play-state: paused;}
.stop .span:nth-child(18){animation-play-state: paused;}
.stop .span:nth-child(19){animation-play-state: paused;}
.stop .span:nth-child(20){animation-play-state: paused;}
</style >
<div id="papa">
<audio id="MusicPlayer" src="https://music.163.com/song/media/outer/url?id=1319660046 " autoplay loop></audio>
<div id="fullscreen">全屏观赏</div>

<div id="mplayer">

        <span class="leaf"></span>

        <span class="leaf"></span>

        <span class="leaf"></span>

         <span class="leaf"></span>

        <span class="leaf"></span>

        <span class="leaf"></span>

       

</div>
<div id="testImg" >

<div id='ganguang' >
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
   <m class="span"></m>
<m class="span"></m>
    <m class="span"></m>
    <m class="span"></m>
   <m class="span"></m></div>
</div>
<div class="bfbj">
<divid="btn">
<div id="pt">
<div id="loading">
<div class="color1"></div>
<div class="color1"></div>
<div class="color1"></div>
<div class="color1"></div>
<div class="color1"></div>
<div class="color2"></div>
<div class="color2"></div>
<div class="color2"></div>
<div class="color2"></div>
<div class="color2"></div>
</div>
</div></div>
   <div class="lrc">
      <div class="p"> <liid="ullrc" >
          </li>
      </div>
    </div>
</div>
</div>
<style>
.bfbj{
    width: 100%;   height: 100%;margin: 0px 0px;position: absolute;
}
#MusicPlayer{
    width: 600px;
    display: block;
    margin: 0 auto;
}
#btn{
    display: block;
    margin: 0 ;
}
.lrc{
    width: 980px;
    height: 140px;position: absolute;top:85%; left:5%;
        z-index: 3;
    overflow: hidden;
    display: block;
    margin: 0px 0px;
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 45px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
    background-image:linear-gradient(50deg, #ffff00, #ff0000, #fff000, #00ff00);
   background-position: 0px 0;
   -webkit-animation:loop 3s linear 2;
}
@-webkit-keyframes loop{
   0%{background-position: -800px 0;filter:hue-rotate(360deg)contrast(180%)brightness(500%);}
   
}
#pt{ width: 100px; height: 100px; display: block; position: absolute; top:10%; left: 10%; z-index:20;}
.color1{ background: #Fff567;}
.color2{ background: #00ff00;}

@keyframes loadRotate{
from{ transform:rotateZ(0deg);}
to{ transform:rotateZ(-360deg);}
}

#loading{ width: 100px; height: 100px; position: absolute; left:850%; top:360%;   animation:loadRotate 6s linear infinite; animation-fill-mode:both;background: url(https://365.tf/disk/tf/1676133953.png)0px 0/100%100%;border-radius:50%;}
#loading div{ width: 20px; height:30px; position: absolute;left:40px; top:35px; -webkit-transform:rotateZ(0) translateX(60px) ; opacity: 1; border-radius: 50% 0; }
#loading div:nth-child(2){-webkit-transform:rotateZ(36deg) translateX(60px) ; opacity: 0.8; }
#loading div:nth-child(3){-webkit-transform:rotateZ(72deg) translateX(60px); opacity: 0.7; }
#loading div:nth-child(4){-webkit-transform:rotateZ(108deg) translateX(60px); opacity: 0.6;}
#loading div:nth-child(5){-webkit-transform:rotateZ(144deg) translateX(60px) ; opacity: 0.4;}

#loading div:nth-child(6){-webkit-transform:rotateZ(180deg) translateX(60px) ; opacity: 1; }
#loading div:nth-child(7){-webkit-transform:rotateZ(216deg) translateX(60px) ; opacity: 0.8; }
#loading div:nth-child(8){-webkit-transform:rotateZ(252deg) translateX(60px) ; opacity: 0.6; }
#loading div:nth-child(9){-webkit-transform:rotateZ(288deg) translateX(60px) ; opacity: 0.5; }
#loading div:nth-child(10){-webkit-transform:rotateZ(324deg) translateX(60px) ; opacity: 0.4; }

</style>

<script >
var lrc = `http://bbs.cnzv.cc/ 歌词外链
彭沛绮 - 难念的经
作词：林夕
作曲：周华健
笑你我枉花光心计
爱竞逐镜花那美丽
怕幸运会转眼远逝
为贪嗔喜恶怒着迷
责你我太贪功恋势
怪大地众生太美丽
悔旧日太执信约誓
为悲欢哀怨妒着迷
啊哈
舍不得璀璨俗世
啊哈
躲不开痴恋的欣慰
啊哈
找不到色相代替
啊哈
参一生参不透这条难题
吞风吻雨葬落日未曾彷徨
欺山赶海践雪径也未绝望
拈花把酒偏折煞世人情狂
凭这两眼与百臂
或千手不能防
天阔阔雪漫漫共谁同航
这沙滚滚水皱皱笑着浪荡
贪欢一晌偏教
那女儿情长埋葬
笑你我枉花光心计
爱竞逐镜花那美丽
怕幸运会转眼远逝
为贪嗔喜恶怒着迷
责你我太贪功恋势
怪大地众生太美丽
悔旧日太执信约誓
为悲欢哀怨妒着迷
啊哈
舍不得璀璨俗世
啊哈
躲不开痴恋的欣慰
啊哈
找不到色相代替
啊哈
参一生参不透这条难题
吞风吻雨葬落日未曾彷徨
欺山赶海践雪径也未绝望
拈花把酒偏折煞世人情狂
凭这两眼与百臂
或千手不能防
天阔阔雪漫漫共谁同航
这沙滚滚水皱皱笑着浪荡
贪欢一晌偏教
那女儿情长埋葬
吞风吻雨葬落日未曾彷徨
欺山赶海践雪径也未绝望
拈花把酒偏折煞世人情狂
凭这两眼与百臂
或千手不能防
天阔阔雪漫漫共谁同航
这沙滚滚水皱皱笑着浪荡
贪欢一晌偏教
那女儿情长埋葬
`;

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

$("MusicPlayer").ontimeupdate = setPosition;

var image = document.getElementById("testImg"),
    button = document.getElementById("btn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
loading.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
MusicPlayer.addEventListener('playing', () => loading.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () => loading.style.animationPlayState = 'paused');


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

</script >
<script>
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>

梦缘 发表于 2023-4-20 15:55

好漂亮的播放器，欣赏问好！{:4_204:}

红影 发表于 2023-4-20 16:37

漂亮，暂停的时候两个转动花瓣都停了下来呢。欣赏亚伦老师好帖{:4_187:}

查看完整版本: 彭沛绮 - 难念的经