论坛 › 欢乐水吧 › 郭玲-梦中的村落(DJ何鹏版)【（叶子旋转）可控动画】

亚伦影音工作室 发表于 2023-2-11 16:43

郭玲-梦中的村落(DJ何鹏版)【（叶子旋转）可控动画】

本帖最后由 亚伦影音工作室 于 2023-2-11 16:43 编辑 <br /><br /><style>
#papa { margin: 10px -250px ; width: 1100px; height: 640px; background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/10%10%,url(https://365.tf/disk/tf/1676177286.jpg)0 0/100%100%; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;transform:rotateX(0deg) scale(1)}
#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:15%; left:15%;
width: 520px;
height: 440px;
cursor: pointer;
animation: spin 20s 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://365.tf/disk/tf/1676179849.jpg)0 0/100% 100%;
transform: rotate(60deg)translateX(60px);
}
.leaf:nth-of-type(2) {background:url(https://365.tf/disk/tf/1676152937.png)0 0/100% 100%;
transform: rotate(120deg)translateX(60px);
}
.leaf:nth-of-type(3) {background:url(https://365.tf/disk/tf/1676139609.jpg)0 0/100% 100%;
transform: rotate(180deg)translateX(60px);
}
.leaf:nth-of-type(4) {background:url(https://365.tf/disk/tf/1676180983.jpg)0 0/100% 100%;
transform: rotate(240deg)translateX(60px);
}
.leaf:nth-of-type(5) {background:url(https://365.tf/disk/tf/1676175715.jpg)0 0/100% 100%;
transform: rotate(300deg)translateX(60px);
}
.leaf:nth-of-type(6) {background:url(https://365.tf/disk/tf/1676173232.jpg)0 0/100% 100%;
transform: rotate(360deg)translateX(60px);
}
@keyframes spin {0% { transform: rotate(360deg); }
}
</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: 38%;
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://www.qqmc.com/up/kwlink.php?id=260098029.mp3" 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:850px; top:50%;   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 = `郭玲-梦中的村落(DJ何鹏版)
词:张世东
曲:何鹏
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 = 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-2-11 18:07

这个真的漂亮，欣赏。

红影 发表于 2023-2-11 19:11

旋转的花瓣美人很漂亮。欣赏亚伦老师好帖{:4_187:}

红影 发表于 2023-2-11 19:13

暂停播放器，旋转花瓣和漂浮动态也暂停了。真棒{:4_187:}

梦缘 发表于 2023-2-11 19:29

叶子 旋转，好看好听，欣赏问好！{:4_187:}

小辣椒 发表于 2023-2-11 20:02

亚伦这个花瓣做的漂亮{:4_199:}

查看完整版本: 郭玲-梦中的村落(DJ何鹏版)【（叶子旋转）可控动画】