论坛 › 动画音画 › 《云水情》云飞 郭津彤

焱鑫磊 发表于 2023-2-24 23:50

《云水情》云飞 郭津彤

本帖最后由 焱鑫磊 于 2023-5-17 02:33 编辑 <br /><br /><style>
#papa { margin: 100px -280px ; width: 1164px; height: 640px; background: url(https://pic2.imgdb.cn/item/6412e67aebf10e5d530a990b.gif)0 0/20%20%,linear-gradient(80deg, #000080, #000090, #000000, #111111); box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: absolute; display: grid; place-items: center; z-index: 10000; overflow:hidden;transform:rotateX(0deg) scale(1)}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:80%;color:#00ff00; 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;
border:0px solid #ffffff;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation: round 90s linear infinite;
}

@keyframes round{2% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(-280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
8% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0deg)scale(0.8)translate(10%,-10%);
opacity:1
}
10% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1
}
12% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0)scale(.8)translate(10%,-10%);
opacity:1
}

22% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
}

img:nth-child(1) {
animation-delay: 84s;
}
img:nth-child(2) {
animation-delay: 78s;
}
img:nth-child(3) {
animation-delay: 72s;
}
img:nth-child(4) {
animation-delay: 66s;
}
img:nth-child(5) {
animation-delay: 60s;
}
img:nth-child(6) {
animation-delay: 54s;
}
img:nth-child(7) {
animation-delay: 48s;
}
img:nth-child(8) {
animation-delay: 42s;
}
img:nth-child(9) {
animation-delay: 36s;
}
img:nth-child(10) {
animation-delay: 30s;
}
img:nth-child(11) {
animation-delay: 24s;
}
img:nth-child(12) {
animation-delay: 18s;
}
img:nth-child(13) {
animation-delay: 12s;
}
img:nth-child(14) {
animation-delay: 6s;
}
img:nth-child(15) {
animation-delay: 0s;
}


.stop img:nth-child(1) {
animation-play-state: paused;
}
.stop img:nth-child(2){
animation-play-state: paused;
}
.stopimg: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;
}

.stop img:nth-child(9) {
animation-play-state: paused;
}
.stop img:nth-child(10) {
animation-play-state: paused;
}

.stop img:nth-child(11) {
animation-play-state: paused;
}
.stop img:nth-child(12) {
animation-play-state: paused;
}
.stop img:nth-child(13) {
animation-play-state: paused;
}
.stop img:nth-child(14) {
animation-play-state: paused;
}

.stop img:nth-child(15) {
animation-play-state: paused;
}

</style>
<style>

#midground{
        background:url(https://365.tf/disk/tf/1676799062.png)0 0/ 40% 90%;
animation: STAR-MOVE50s linear infinite;position: absolute;overflow:hidden;width: 100%;filter: blur(0px);
        height: 100%;z-index: 1;
}
#foreground{
        background:url(https://365.tf/disk/tf/1676799062.png)0 0/ 60% 120%;
        animation: STAR-MOVE120s linear infinite;position: absolute;overflow:hidden;width: 100%;filter: blur(8px);
        height: 100%;z-index: 1;
}

@keyframes STAR-MOVE {
        from {
                background-position: 0% -600%
        }
        to {
                background-position: 600% 0%
        }
}
</style>

<div id="papa">
<audio id="MusicPlayer" src="https://pan.111t.net/view.php/01d653350653c11d2935748fa76f78cf.mp3" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>

<ul class="list">
                <li class="one">《云水情》云飞 郭津彤</li>
                <li class="two">词：李长鸿</li>
                <li class="three">曲：孟文豪</li>
                <li class="four">音画制作：焱鑫磊</li>
        </ul>
       

<div id="testImg" >
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463c8020d2dde5777ba9239.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463c8270d2dde5777baa7e8.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463c84f0d2dde5777babe96.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463c8740d2dde5777bad827.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463c8b20d2dde5777baff16.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463c8d90d2dde5777bb16e9.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463c9000d2dde5777bb31dc.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463c92f0d2dde5777bb5270.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463c9580d2dde5777bb6d8e.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463c97f0d2dde5777bb875d.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463c9a60d2dde5777bb9cab.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463c9eb0d2dde5777bbc2e0.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463ca140d2dde5777bbdab7.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463ca3d0d2dde5777bbf187.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6463ca650d2dde5777bc068c.jpg" />
</div>

<div id="midground" ></div>
<div id="foreground" ></div>
<div id="mybox"></div>
<div class="bfbj">
<divid="btn">
<div id="img_border"></div></div>
<div class="lrc" >
      <liid="ullrc" >
          </li>
      </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:90%; 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: #ff0078;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(90deg, #00ff00, #fff000, #ff0000, #00ff00);
   background-position: 0px 0;
   -webkit-animation:loop 3s linear 2;
}
@-webkit-keyframes loop{
   0%{background-position: -800px 0;filter:hue-rotate(0deg)contrast(180%)brightness(500%);}
   
}
#img_border{display:inline-block;width:100px;height:100px;position: absolute;top:15%; 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)contrast(120%)brightness(300%)}
100%{transform: rotate(0deg);}
}
</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');



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

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

</script >


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

<style>
#mybox {
      margin: auto;
      width: 500PX;
height: 120PX;
position: absolute;top:10px; left:10px;z-index: 2;
}
.mysp {color: #ffF000;
      position: absolute;
      font: bold 28px/36px 华文隶书;
filter:drop-shadow( 1px 1px 1px #000000);
}

@keyframes move {
      0% { top: 0px; transform: rotate(0); color: #ff0000; }
      50% { top: 60px; transform: rotate(100deg); color: #ffffff; }
      100% { top: 0px; transform: rotate(360deg); color:#00f000 ; }
}
</style>
<script>
(function() {
      let spans = [],idx = 0, last = null;

      [...'焱鑫磊博客欢迎你'].forEach((item,key) => {
                let sp = document.createElement('span');
                sp.className = 'mysp';
                sp.innerText = item;
                sp.style.cssText += `left: ${key*36+36}px`;
                spans.push(sp);
                mybox.appendChild(sp);
      });

      let mov = () => {
                if(last != null) spans.style.animation = '';
                spans.style.animation = 'move 2s';
                last = idx;
                idx += 1;
                if(idx >= spans.length) idx = 0;
                setTimeout(mov,2000);
      };

      mov();
})();
</script>

<style type="text/css">
.list{list-style: none; margin-left: -30px;width:100%; height:100px;position:absolute;z-index: 2;overflow:hidden;-webkit-mask-image: radial-gradient(black 35% ,transparent 90%); }
.list li{width: 100%;height: 100px; position:relative; animation: myfirst 30s1 ;line-height: 100px;text-align: center; font: normal 3.5em 华文隶书;color: rgb(255, 255, 255,0);transition: all .5s;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
@keyframes myfirst
{0%    {top:0px;color:#000000;}
        25%{ top:0px;color: #800000;}
        50%{ top:-100px;color: #800000;}
        75%{ top:-200px;color: #800000;}
        99%{ top:-300px;color: #800080;}
100%{ top:-400px; color: rgb(255, 255, 255,0); }
}
</style>
<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

红影 发表于 2023-2-25 09:07

好漂亮的帖子，这个风格看亚伦老师常用。文字翻身和图片轮播都很漂亮，歌词同步也很准确。欣赏焱鑫磊好帖{:4_199:}

焱鑫磊 发表于 2023-2-25 10:45

红影 发表于 2023-2-25 09:07
好漂亮的帖子，这个风格看亚伦老师常用。文字翻身和图片轮播都很漂亮，歌词同步也很准确。欣赏焱鑫磊好帖{: ...

问候老师好！

查看完整版本: 《云水情》云飞 郭津彤