论坛 › 动画音画 › 《如水年华》- 王馨

亦是金 发表于 2023-2-7 13:13

《如水年华》- 王馨

本帖最后由 亦是金 于 2023-2-7 19:33 编辑 <br /><br /><!--《如水年华》- 王馨-->

<style>
#papa { margin: 0px 0 0 calc(50% - 665px); width: 1164px; height: 640px; background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gi)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;
}


</style>
<style type="text/css">
#ganguang {width: 100%;
height: 100%;
position: absolute;top:0px; left:0px;z-index: 1;
background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/25%25%,radial-gradient(circle 672px at 50% 50%, rgba(146, 254, 157, 0) 20%,rgba(255, 14, 0, 0.82) 100%);
animation: bh 6s infinite linear;
}

@keyframes bh {
0%{
opacity: 1;clip-path:inset(50% 50% 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
80% {
opacity: 1;clip-path: inset(0 0 0 0);
-webkit-transform:translate(0%,0%)scale(1);filter:hue-rotate(360deg)}
100% {
opacity: 1;clip-path: inset(0 0 0 0);
-webkit-transform:translate(0%,0%)scale(2);}

}

</style >
<div id="papa">
<audio id="MusicPlayer" src="https://www.qqmc.com/mp3/music247394712.mp3" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>
<div id="testImg" >
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6lUMT.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6ldLF.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6ltzV.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6lasU.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6lYR0.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6l0Z4.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6lBdJ.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6lDo9.jpg" />
</div>
<div id='ganguang' > </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:220px;height:220px;position: absolute;top:5%; left:5%;z-index: 30; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://s1.ax1x.com/2023/02/06/pScMWkV.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 = `《 如 水 年 华 》（吉特巴版）
词曲：珞岩
编曲：DJ 默涵
演唱：王馨
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');



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



</script >


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

海笑 发表于 2023-2-7 13:51

欣赏老师佳作！

红影 发表于 2023-2-7 13:53

漂亮的图片轮播，欣赏亦是金老师好帖{:4_187:}

亦是金 发表于 2023-2-7 14:15

海笑 发表于 2023-2-7 13:51
欣赏老师佳作！

谢谢欣赏，新年问好！

亦是金 发表于 2023-2-7 14:15

红影 发表于 2023-2-7 13:53
漂亮的图片轮播，欣赏亦是金老师好帖

谢谢欣赏，新年问好！

庶民 发表于 2023-2-7 14:47

这里是一片山林，藏龙卧虎。

亦是金 发表于 2023-2-7 15:05

庶民 发表于 2023-2-7 14:47
这里是一片山林，藏龙卧虎。

谢谢欣赏，新年问好！{:4_176:}

醉美水芙蓉 发表于 2023-2-7 18:39

亦是金 发表于 2023-2-7 19:35

醉美水芙蓉 发表于 2023-2-7 18:39
欣赏老师好作品！

谢谢欣赏，新年问好！{:4_204:}

红影 发表于 2023-2-7 20:33

亦是金 发表于 2023-2-7 14:15
谢谢欣赏，新年问好！

白天我的网有限制，限制才看到整体效果，这个制作好美啊{:4_199:}

小辣椒 发表于 2023-2-7 21:38

问好亦是金，估计用的亚伦的代码吧，加分后就不能全屏欣赏了

亦是金 发表于 2023-2-7 23:04

红影 发表于 2023-2-7 20:33
白天我的网有限制，限制才看到整体效果，这个制作好美啊

谢谢欣赏夸奖！问好！{:4_204:}

亦是金 发表于 2023-2-7 23:07

小辣椒 发表于 2023-2-7 21:38
问好亦是金，估计用的亚伦的代码吧，加分后就不能全屏欣赏了

是的，用亚伦的代码制作！问好小辣椒！{:4_204:}

小辣椒 发表于 2023-2-8 13:01

亦是金 发表于 2023-2-7 23:07
是的，用亚伦的代码制作！问好小辣椒！

亚伦的帖制作漂亮，但就发现一个问题加分后，不能全屏欣赏

红影 发表于 2023-2-8 15:19

亦是金 发表于 2023-2-7 23:04
谢谢欣赏夸奖！问好！

这个背景的花丛是粉黛乱子草吧，特别漂亮{:4_187:}

亦是金 发表于 2023-2-8 17:33

是的 ，背景的花丛是粉黛乱子草！

查看完整版本: 《如水年华》- 王馨