论坛 › 动画音画 › 《让我走》江淑娜

焱鑫磊 发表于 2023-5-14 19:26

《让我走》江淑娜

本帖最后由 焱鑫磊 于 2023-7-23 22:37 编辑 <br /><br /><style>
#papa { margin: 100px -280px ; width: 1164px; height: 640px; background: url(https://pic2.imgdb.cn/item/6412e67aebf10e5d530a990b.gif)0 0/10%10%,url(https://pic2.imgdb.cn/item/6460c51f0d2dde577713627f.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}
.photo {width: 100%;
height: 100%;
position: absolute;z-index: -2;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;border-radius: 0px 900px;border:3px solid #00f000;
animation-name: round ;animation-duration: 48s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;}
@keyframes round{0% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-90deg)scale(0.7)translate(-15%,-20%);
opacity:1
}
10% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0)scale(0.7)translate(-15%,-20%)skewX(0deg);
opacity:1}
12% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0)scale(0.7)translate(-15%,-20%)skewX(0deg);
opacity:1}

22% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(90deg)scale(0.7)translate(-15%,-20%)skewX(0deg);
opacity:0}
}
img:nth-child(1) {animation-delay: 42s;}
img:nth-child(2) {animation-delay: 36s;}
img:nth-child(3) {animation-delay: 30s;}
img:nth-child(4) {animation-delay: 24s;}
img:nth-child(5) {animation-delay: 18s;}
img:nth-child(6) {animation-delay: 12s;}
img:nth-child(7) {animation-delay: 6s;}
img:nth-child(8) {animation-delay: 0s;}
.stop img:nth-child(1) {animation-play-state: paused;}
.stop img:nth-child(2) {animation-play-state: paused;}
.stop img:nth-child(3) {animation-play-state: paused;}
.stop img:nth-child(4) {animation-play-state: paused;}
.stop img:nth-child(5) {animation-play-state: paused;}
.stop img:nth-child(6) {animation-play-state: paused;}
.stop img:nth-child(7) {animation-play-state: paused;}
.stop img:nth-child(8) {animation-play-state: paused;}
</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://i.mp3.wf/view.php/a32805c03293bdf33386fe67772fa2b1.mp3" autoplay loop></audio>
<div id="fullscreen">全屏观赏</div>
<div id="testImg" >
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6460c3100d2dde57771055a4.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6460c33c0d2dde5777109a50.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6460c3610d2dde577710cfad.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6460c3850d2dde57771106af.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6460c3af0d2dde5777114aa6.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6460c3d80d2dde5777118502.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6460c3fd0d2dde577711c10b.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6460c4220d2dde577711f5eb.jpg" />
<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:50%; top:50%; margin-left:-50px; margin-top: -50px;animation:loadRotate 6s linear infinite; animation-fill-mode:both;background: url(https://pic2.imgdb.cn/item/6412faecebf10e5d5357f0ef.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');
</script >
<script>
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>

醉美水芙蓉 发表于 2023-5-14 19:47

马黑黑 发表于 2023-5-14 19:59

非常漂亮

焱鑫磊 发表于 2023-5-14 20:42

醉美水芙蓉 发表于 2023-5-14 19:47
这个代码有点小问题，论坛变形了！

朋友：我这里显示正常呢。{:4_187:}

焱鑫磊 发表于 2023-5-14 20:43

马黑黑 发表于 2023-5-14 19:59
非常漂亮

问候老师好！{:4_204:}

马黑黑 发表于 2023-5-14 21:09

焱鑫磊 发表于 2023-5-14 20:43
问候老师好！

晚上嚎

红影 发表于 2023-5-14 21:21

这个制作又是个新的，看到过叶瓣剪切的图片，没看到这样展示出来的。欣赏焱鑫磊好帖{:4_187:}

焱鑫磊 发表于 2023-5-14 21:32

红影 发表于 2023-5-14 21:21
这个制作又是个新的，看到过叶瓣剪切的图片，没看到这样展示出来的。欣赏焱鑫磊好帖

问候红影晚上好！{:4_187:}

红影 发表于 2023-5-14 22:29

焱鑫磊 发表于 2023-5-14 21:32
问候红影晚上好！

问好焱鑫磊，再赏好帖{:4_187:}

樵歌 发表于 2023-5-15 08:44

多种神通的综合无用，创造性的活学活用典范！真是漂亮极啦{:4_187:}

亦是金 发表于 2023-5-15 18:37

问好焱鑫磊！{:4_187:}欣赏美帖！收藏学习了！

焱鑫磊 发表于 2023-5-15 20:25

樵歌 发表于 2023-5-15 08:44
多种神通的综合无用，创造性的活学活用典范！真是漂亮极啦

问好樵歌！{:4_187:}

焱鑫磊 发表于 2023-5-15 20:26

亦是金 发表于 2023-5-15 18:37
问好焱鑫磊！欣赏美帖！收藏学习了！

问候亦是金好！{:4_204:}

樵歌 发表于 2023-5-16 13:07

焱鑫磊 发表于 2023-5-15 20:25
问好樵歌！

越做好！成品牌了{:4_431:}

查看完整版本: 《让我走》江淑娜