论坛 › 动画音画 › 《风中的玛尼堆》阿斯根

焱鑫磊 发表于 2023-5-7 08:50

《风中的玛尼堆》阿斯根

本帖最后由 焱鑫磊 于 2023-5-7 08:53 编辑 <br /><br /><style>
#papa { margin: 30px -280px ; width: 1164px; height: 640px; background: url(https://pic2.imgdb.cn/item/6412e67aebf10e5d530a990b.gif)0 0/10%10%,url(https://pic2.imgdb.cn/item/6456f47e0d2dde5777b83435.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);border-radius: 500px 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:17%; left:25%;
width: 540px;
height: 405px;
cursor: pointer;
animation: spin 10s infinite linear;
}
.leaf {position: absolute;
width: 40%;
height: 40%;
border-radius: 1px 130px;
border:3px solid #00f000;
transform-origin: 128% 128%;
}
.leaf:nth-of-type(1) {background:url(https://pic2.imgdb.cn/item/6456f3610d2dde5777b6edc6.jpg)0 0/100% 100%;
transform: rotate(60deg)translateX(60px);animation: s 2s;
}
.leaf:nth-of-type(2) {background:url(https://pic2.imgdb.cn/item/6456f38d0d2dde5777b74ab9.jpg)0 0/100% 100%;
transform: rotate(120deg)translateX(60px);animation: s 4s;
}
.leaf:nth-of-type(3) {background:url(https://pic2.imgdb.cn/item/6456f3bb0d2dde5777b7af7c.jpg)0 0/100% 100%;
transform: rotate(180deg)translateX(60px);animation: s 6s;
}
.leaf:nth-of-type(4) {background:url(https://pic2.imgdb.cn/item/6456f3e50d2dde5777b7cbe0.jpg)0 0/100% 100%;
transform: rotate(240deg)translateX(60px);animation: s 8s;
}
.leaf:nth-of-type(5) {background:url(https://pic2.imgdb.cn/item/6456f4150d2dde5777b7eb3d.jpg)0 0/100% 100%;
transform: rotate(300deg)translateX(60px);animation: s 10s;
}
.leaf:nth-of-type(6) {background:url(https://pic2.imgdb.cn/item/6456f4400d2dde5777b80ab1.jpg)0 0/100% 100%;
transform: rotate(360deg)translateX(60px);animation: s 12s;
}
@keyframes spin {0% { transform: rotate(360deg); }
}

@keyframes s {0% { transform:scale(0);opacity: 0}
}
</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.joy127.com/url/104591.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:-80%; top:410%;   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 = `《风中的玛尼堆》阿斯根
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 = $("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-5-7 09:38

这个制作别致，把整个底板都做成了叶形呢。一键可以暂停所有动态。欣赏焱鑫磊好帖{:4_187:}

醉美水芙蓉 发表于 2023-5-7 11:45

梦缘 发表于 2023-5-7 16:45

真漂亮，欣赏点赞！{:4_204:}

焱鑫磊 发表于 2023-5-7 18:52

红影 发表于 2023-5-7 09:38
这个制作别致，把整个底板都做成了叶形呢。一键可以暂停所有动态。欣赏焱鑫磊好帖

问候红影好！{:4_187:}{:4_204:}

焱鑫磊 发表于 2023-5-7 18:53

醉美水芙蓉 发表于 2023-5-7 11:45
很漂亮！

朋友好！{:4_187:}{:4_204:}{:4_176:}

焱鑫磊 发表于 2023-5-7 18:53

梦缘 发表于 2023-5-7 16:45
真漂亮，欣赏点赞！

梦缘好！{:4_176:}{:4_204:}

红影 发表于 2023-5-7 20:31

焱鑫磊 发表于 2023-5-7 18:52
问候红影好！

问好焱鑫磊，晚上好{:4_187:}

查看完整版本: 《风中的玛尼堆》阿斯根