论坛 › 动画音画 › 《你是陪我走过风雨的人》红蔷薇

焱鑫磊 发表于 2023-5-8 01:03

《你是陪我走过风雨的人》红蔷薇

本帖最后由 焱鑫磊 于 2023-5-8 01:11 编辑 <br /><br /><style>
#papa { margin: 100px -280px ; width: 1164px; height: 640px; background: url(https://pic2.imgdb.cn/item/6412e67aebf10e5d530a990b.gif)0 0/10%10%,linear-gradient(80deg, #000080, #000090, #000000, #111111); 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;
animation-name: round ;animation-duration: 48s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;}
@keyframes round{0% {opacity: 0;}
10% {opacity: 1;}
18% {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://www.joy127.com/url/104640.mp3" autoplay loop></audio>
<div id="fullscreen">焱鑫磊</div>
<div id="testImg" >
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6457b2350d2dde577791ed62.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6457b2580d2dde5777921909.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6457b27c0d2dde5777924278.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6457b29d0d2dde57779266a0.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6457b2bb0d2dde577792896a.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6457b2dc0d2dde577792af30.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6457b3040d2dde577792e4af.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6457b3250d2dde5777931040.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="img_border"></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:10%;
        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%);}
   
}
#img_border{display:inline-block;width:150px;height:150px;position: absolute;top:5%; left:5%;z-index: 30; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://pic2.imgdb.cn/item/6412faecebf10e5d5357f0ef.png)0px 0px/100% 100%;border-radius:0%;}
@keyframes rotating{
0%{transform: rotate(-360deg);filter:hue-rotate(360deg)}
100%{transform: rotate(0deg);}
}
</style>

<style type="text/css">.items { animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</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 = '.';
      }
    };
}
img_border.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
MusicPlayer.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');
</script >
<script>
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '焱鑫磊', document.exitFullscreen());
                fs = !fs;
        };
</script>

红影 发表于 2023-5-8 09:19

播放器当中还有字呢。这个制作真漂亮。欣赏焱鑫磊好帖{:4_187:}

焱鑫磊 发表于 2023-5-8 10:03

红影 发表于 2023-5-8 09:19
播放器当中还有字呢。这个制作真漂亮。欣赏焱鑫磊好帖

红影上午好！{:4_187:}{:4_204:}

红影 发表于 2023-5-8 12:13

焱鑫磊 发表于 2023-5-8 10:03
红影上午好！

问好焱鑫磊，新周快乐{:4_187:}

梦缘 发表于 2023-5-9 10:33

好听的歌，好美的帖，欣赏点赞！{:4_204:}

焱鑫磊 发表于 2023-5-9 16:37

梦缘 发表于 2023-5-9 10:33
好听的歌，好美的帖，欣赏点赞！

问候梦缘朋友好！{:4_204:}

查看完整版本: 《你是陪我走过风雨的人》红蔷薇